El transform translate
al usarlo mueve un elemento, ¿pero este funciona como el position relative
utilizando únicamente el espacio de la posición original? ¿O la posición es la nueva ?
-
explícate mejor , no entiende en concreto que es lo que deseas saber– Asneyel 20 dic. 2017 a las 13:33
-
al aplicar el transform translate, el espacio ocupado por el elemento es el original ? el original + margen ? o la nueva posicion sin amrgen ?– Pachiel 20 dic. 2017 a las 18:19
-
1El original + margen.– Edgar Gutiérrezel 26 dic. 2017 a las 19:38
2 respuestas
posición: relativa
Un elemento con
position: relative;
está posicionado en relación con su posición normal.Establecer las propiedades superior, derecha, inferior e izquierda de un elemento relativamente posicionado hará que se ajuste lejos de su posición normal. Otro contenido no se ajustará para caber en ningún espacio dejado por el elemento.
translate()
La función CSS re posiciona un elemento en las direcciones horizontal y / o vertical. Su resultado es un tipo de datos.translate()
Esta transformación se caracteriza por un vector bidimensional. Sus coordenadas definen cuánto se mueve el elemento en cada dirección.
Ejemplo con la ayuda de
Ejemplo:
.caja0{/*transform: translate() con la posision relativa*/
width: 100px;
height: 100px;
background: rgb(238, 121, 36);
transform: translate(100px);
position:relative;
}
.caja1{/*transform: translate() sin posision relativa*/
width: 100px;
height: 100px;
background: rgb(99, 217, 20);
transform: translate(100px);
}
.caja2{/*transform sin posision absolute*/
width: 100px;
height: 100px;
background: rgb(20, 122, 217);
transform: translate(100px);
position:absolute;
}
<div class="caja0">
caja0
</div>
<div class="caja1">
caja1
</div>
<div class="caja2">
caja2
</div>
-
-
para mover un elemento y dejar el espacio como quien dice lleno usa
left
top
right
button
y para mover un elemento y que repercute en los demas siendo relativos usamargin
... espero te ayude el 20 dic. 2017 a las 16:14
cuando aplicas el Transform translate, el elemento ocupa la nueva posición mas el margen que tiene definido, ejemplo:
si tienes un div
de ancho 50px y margin
de 10px, ocuparías 10px a la izquierda 50px del elemento y 10px a la derecha, serian 70px, si lo trasladas a la derecha supón 10px, entonces el elemento seria el que se desplaza, dejando a la izquierda 10px que es lo que se desplaza , después 10px mas del margen izquierdo , y luego seguiría el elemento.
antes:
..10px..|.....50px el elemento...|..10px..
después trasladándolo 10px a la derecha
..10px del translate..|.10px margen izquierdo.|.50px el elemento..|.10px margen derecho..