Los valores que recibe la función translate se calculan con base en el tamaño del elemento. Esto significa que si el elemento tiene un width de 60px, al usar transform: translate(-100%, 0) sería lo mismo que si pusiéramos transform: translate(-60px, 0).
Aplica de igual forma para el eje Y con respecto al height.
Lleva tus conocimientos de CSS a otro nivel
Tips para llevar tu conocimiento de CSS a otro nivel + Quices
¿De dónde venimos y en dónde estamos?
¿Cómo fue pensado CSS cuando se creó?
Limitaciones de CSS y el problema de los elementos flotantes
Herramientas que nos han facilitado el camino
¿Cómo se llegó al concepto de CSS Grid?
¿CSS Grid es una idea nueva? La evolución de la especificación
¿Qué significa Grid para CSS?
Control de alineamiento
Técnicas de alineamiento antes de CSS Grid: margin y line-height
Técnicas de alineamiento antes de CSS Grid: table-cell y positions
Técnicas de alineamiento antes de CSS Grid: pros y contras
Modos de escritura y ejes de alineamiento + Reto
Propiedades físicas y lógicas en CSS + Quiz
Técnicas de alineamiento con Flexbox
Dibujemos con CSS + Reto
Conceptos generales para comenzar a trabajar con CSS Grid
Grid y las relaciones padre e hijos inmediatos + Quíz
Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto
¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos
Propiedades y valores para el elemento padre
Creando nuestro contenedor: ¿display: grid o display: inline-grid?
Creando filas, columnas y espaciado + Reto
Alineamiento en el elemento contenedor + Quiz
Generación automática de tracks + Quíz
Funciones: repeat(), minmax() y fit-content()
Propiedades y valores para los elementos hijos
¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto
Ubicación + Reto
Alineamiento en los elementos hijos + Quiz
¡Manos al código! Fase de ubicación y alineamiento
Continuando con la fase de ubicación y alineamiento
Lo que podemos lograr adicionalmente con CSS Grid
Responsive y CSS Grid
Continúa con el Curso de Diseño Web con CSS Grid y Flexbox
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
13 Días
23 Hrs
12 Min
6 Seg
Técnicas de alineamiento antes de CSS Grid: table-cell y positions
8/28Recursos
Aportes 92
Preguntas 14
Ordenar por:
Un poco enredado la explicación de posiciones y propiedades ojalá se amplíen más adelante
Hice una cosa medio rara con una de las tarjetitas 😂, traté de aplicarle un efecto 3D usando perspectivas y una rotación pero se ve un poco raro jajaja, igual y se vería mejor si le pusiera una animación o algo jajaja:
.
.
Este fue mi código 😂:
.element2 {
@extend .element;
background: papayawhip;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) perspective(600px) rotateY(45deg);
}
Obviamente si aumentamos ese 45deg la perspectiva 3D irá cambiando jaja, sé que es posicionamiento pero no pude evitarlo jajaja
En esta clase nos enfocaremos en:
- Table-Cell
- Positions
Es importante conocer las propiedades que tienen estas técnicas para poder posicionar bien.
En la técnica de Table-Cell tenemos las propiedades de
- display: table-cell — Hace que cualquier elemento se comporte como una tabla.
- text-align — Estos últimos dos, los vimos en la clase anterior.
- vertical-align
La ultima tecnica a ver es la de Positions, que tiene las siguientes propiedades:
- position: relative
- position: absolute
- top
- right
- bottom
- left
- transform: translate ()
Hay una tabla que coincide con todos los valores de positions, debido a eso podemos ver sus características dependiendo de su valor.
Esto tiene una sintaxis donde va primero
- Top: Longitud, Porcentaje, Valor por Defecto, Hereda Del Padre
- Transform: none, transform-functions, ,initial, inherit
- Transform: translate(x.y)
Que es un cientifico de datos?
El Científico de Datos o Data Scientist es un perfil profesional que traduce los grandes volúmenes de información disponibles conocidos como Big Data. Provienen de todo tipo de fuentes de información masivas y las convierten en respuestas.
Otra forma es usando la función calc(), con esta función se hace un cálculo directamente dentro del atributo al que queremos verle afectado. Ejemplo lo movía un 50% y le restaba la mitad del elemento para que este se viera centrado. Con esto reducimos una línea de código por elemento jeje.
No le veo mucho sentido a estar explicando soluciones de posicionamiento que se usaban antes de css grid. Entiendo que la profe ha querido mostrarlas para que luego podamos ver lo fácil que todo se logra con css grid. Pero al final los alumnos que no vivieron la época pre-css grid no la comprenden del todo, sienten muy rápidas las explicaciones (no es mi caso). Y en todo caso es un contenido innecesario ahora mismo si la propuesta es css grid. Me parece un relleno total al contenido del curso.
Mas allá del alineamiento, esta clase me ayudo a comprender de mejor manera el posicionamiento.
No olvidar que la position absolute va directamente ligada al relative del elemento padre en el contenedor. En caso contrario cuando se encuentren trabajando y no les resulta es porque absolute va a ir directamente a tomar en valor relativo del propio body.
Ahí va un pequeño lifehack, saludos
Clase 8 y no veo nada de Grid.
que significa @extend??? o para que sirve???
Hola a todos. Para las personas que quieren guardar el codigo en su computadora, acá les dejó el codigo en HTML y CSS.
Alineación con tabe-cell:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alineacion con Table-cell</title>
<style>
.element {
width: 60px;
height: 60px;
text-align: center;
padding-top: 10px;
box-sizing: border-box;
display: inline-block;
}
.container {
background-color: turquoise;
border: 1px solid white;
width: 180px;
height: 180px;
display: table-cell;
}
.element1 {
background-color: papayawhip;
}
.element2 {
background-color: pink;
}
.element3 {
background-color: lightcyan;
}
.container1 {
text-align: left;
vertical-align: top;
}
.container2 {
text-align: left;
vertical-align: middle;
}
.container3 {
text-align: left;
vertical-align: bottom;
}
.container4 {
text-align: center;
vertical-align: top;
}
.container5 {
text-align: center;
vertical-align: middle;
}
.container6 {
text-align: center;
vertical-align: bottom;
}
.container7 {
text-align: right;
vertical-align: top;
}
.container8 {
text-align: right;
vertical-align: middle;
}
.container9 {
text-align: right;
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="container container1">
<div class="element element1">top left</div>
</div>
<div class="container container2">
<div class="element element1">center left</div>
</div>
<div class="container container3">
<div class="element element1">bottom left</div>
</div>
<div class="container container4">
<div class="element element2">top center</div>
</div>
<div class="container container5">
<div class="element element2">center center</div>
</div>
<div class="container container6">
<div class="element element2">bottom center</div>
</div>
<div class="container container7">
<div class="element element3">top right</div>
</div>
<div class="container container8">
<div class="element element3">center right</div>
</div>
<div class="container container9">
<div class="element element3">bottom right</div>
</div>
</body>
</html>
Alienación con position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alineacion con la propiedad position</title>
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 550px;
}
.container {
background-color: turquoise;
width: 180px;
height: 180px;
position: relative;
}
.element {
width: 60px;
height: 60px;
text-align: center;
padding-top: 10px;
box-sizing: border-box;
position: absolute;
}
.element1 {
background-color: papayawhip;
left: 0;
top: 0;
}
.element2 {
background-color: papayawhip;
left: 0;
top: 50%;
transform: translate(0, -50%);
}
.element3 {
background-color: papayawhip;
left: 0;
top: 100%;
transform: translate(0, -100%);
}
.element4 {
background-color: pink;
left: 50%;
top: 0;
transform: translate(-50%, 0);
}
.element5 {
background-color: pink;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.element6 {
background-color: pink;
left: 50%;
top: 100%;
transform: translate(-50%, -100%);
}
.element7 {
background-color: lightcyan;
left: 100%;
top: 0;
transform: translate(-100%, 0);
}
.element8 {
background-color: lightcyan;
left: 100%;
top: 50%;
transform: translate(-100%, -50%);
}
.element9 {
background-color: lightcyan;
left: 100%;
top: 100%;
transform: translate(-100%, -100%);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="element element1">top left</div>
</div>
<div class="container">
<div class="element element2">center left</div>
</div>
<div class="container">
<div class="element element3">bottom left</div>
</div>
<div class="container">
<div class="element element4">top center</div>
</div>
<div class="container">
<div class="element element5">center center</div>
</div>
<div class="container">
<div class="element element6">bottom center</div>
</div>
<div class="container">
<div class="element element7">top right</div>
</div>
<div class="container">
<div class="element element8">center right</div>
</div>
<div class="container">
<div class="element element9">bottom right</div>
</div>
</div>
</body>
</html>
Espero les ayude.
hey guys, ctrl + / sacan comentario, no sabia como hacerlo =)
Si no se les alinea reinicien…
En definitiva me quedo con Positions
Fantastic! I didn’t know anything about transform, today I have a new property to play with CSS.
.
Thanks. 😁
CSS Aligment Techniques - Table Cell
https://codepen.io/luisfalconmx/pen/MWJwrbb
CSS Aligment Techniques - Positions
https://codepen.io/luisfalconmx/pen/BapNJQX
Tambien podriamos usar bottom: 0 o right: 0 para evitarnos un translate()
Para quienes quieren hacer los ejercicios en Visual Studio Code con SASS les remiendo mucho este video para que puedan instalar una extensión sin necesidad de bajar node.js
.
En varias clases replicaba lo que veia en el código que nos pasaron en HTML y CSS pero en esta ya no fue tan fácil porque el display: grid que usábamos en las anteriores ya no permite que uses el vertical-align: aquí. Por eso me vi en la necesidad de usas SASS y te ahorras código de CSS o(￣▽￣)ｄ
.
¡Espero les sirva!
entonces los elementos hijos del container deben ser primero dysplay: inline-block para que despues los puedas tratar como display table?
Minuto 11:00 aprox. Otra manera de posicionar al centro (si sabemos el tamaño del elemento #px) es usar "calc(50% - #px)". Es una opción más corta de usar que "transform", pero, a largo plazo creo que si hay cambios en tamaños del elemento va ser complejo ajustar cada valor asignado en calc. Es decir, que a largo plazo y para evitar dolores de cabeza es mejor usar "transform"
Entonces… Creo que ya aprendí a centrar de todas las formas. 😃🔥
Creo que es mas facil utilizar esa forma, asi nos ahorramos el trasnform y le restamos lo 30x que es la mitad de lo que mediria nuestro elemento
top: calc(50% - 30px);
Excelente la clase, no conocia transform: translate. La metodologia de la profe de usar codepen y asi poder ir directamente a practicar es un acierto total, super excelente. Es cuestion de ver un solo ejemplo si no lo tienes claro, pausar el video y terminar todo el ejercicio por nuestra cuenta.
Esta clase me aclaró un montón 😃
es más sencillo, es muy confusa la explicación
Los valores de top/left hace referencia al porcentaje de la altura/ancho del elemento padre (contenedor). Mientras que los valores de los ejes X/Y en translate de transform hacen referencia a la altura/ancho del elemento en sí
Otro position que también es muy imoortante y muy util es el position fixed
Con la función calc(50% - (la mitad del width del elemento)) podemos quizás ahorrarnos otra linea de código.
A la fecha de hoy, ya no hay acceso al repositorio para acceder a las clases.
Reto table-cell completado
Tutoriales
_
He elaborado los siguientes tutoriales que espero les ayude en caso no hayan comprendido algún concepto o quieran reforzarlo
Técnicas de alineación utilizando la propiedad transform y la función translate( )
_
-
Un poco de teoría visual
Nota: Recuerda que la función CSS translate se usa dentro de la propiedad transform, como veremos más adelante.
_ -
Ahora empecemos con la alineación:
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
Función translate( )
TÉCNICAS DE ALINEACIÓN UTILIZANDO position y calc( )
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
Posicionamiento adaptable utilizando left y calc( )
_
Alineamiento con display: table-cell / text-align y vertical-align
- Teoría
_
- Paso a paso
_
Propiedad text-align
_
_
Propiedad vertical-align
_
_
Propiedad TEXT-ALIGN
está increíble, la próxima actualización del curso un poco más nítido el código
ahora se como poner los elementos en la mitad del medio del centro
position: absolute, siempre se adhiere a un position: relative. Por eso se coloca position: relative al contenedor y position: absolute al elemento dentro del contenedor, ya con top, right, bottom y left, se decide su posición final.
Tenemos display: table; display: table-row; display: table-cell;
Estas valores de propiedad al parecer tienen su usos todavía como en la creación de tablas de precios, comparaciones, elementos. Claro que su uso es cada vez menos por display: grid.
Pero aún así yo usaria display: table, table-row y table-cell para la creación de tablas simples, claro si quisiera un diseño más complejo de tablas usaría display: grid. Pero al final, todo depende de tus necesidades o a lo que requiere el proyecto.
¡Muy buena clase profe Teff! Me quedó clarísimo el uso del position y el transform 😀
Definitivamente profe Teff. Mi clase favorita es la de diseño responsivo
Gracias a las clases de programación básica dónde se habla del canvas, pude entender mejor lo de la propiedad transform: translate(x, y) incluso para el ejemplo, tomando el element3 lo pude posicionar de la siguiente manera transform: translate(0,120px), ya que, el container tiene una altura de 180px y le resto los 60px del elemento, elimino las propiedades top y left y listo
.wrapper{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
width: 550px;
}
.container{
background-color: brown;
width: 180px;
height: 180px;
position: relative;
}
.element{
width: 60px;
height: 60px;
text-align: center;
padding-top: 10px;
box-sizing: border-box;
}
.element1{
background-color: aquamarine;
position: absolute;
top: 0;
left: 0;
}
.element2{
background-color: aquamarine;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
.element3{
background-color: aquamarine;
position: absolute;
top: 100%;
left: 0;
transform: translate(0, -100%);
}
.element4{
background-color: antiquewhite;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.element5{
background-color: antiquewhite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.element6{
background-color: antiquewhite;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -100%);
}
.element7{
background-color: coral;
position: absolute;
top: 0;
left: 100%;
transform: translate(-100%, 0);
}
.element8{
background-color: coral;
position: absolute;
top: 50%;
left: 100%;
transform: translate(-100%, -50%);
}
.element9{
background-color: coral;
position: absolute;
top: 100%;
left: 100%;
transform: translate(-100%, -100%);
}
.element{
width: 60px;
height: 60px;
text-align: center;
padding-top: 10px;
box-sizing: border-box;
}
.element1{
background-color: forestgreen;
display: inline-block;
}
.element2{
background-color: gold;
display: inline-block;
}
.element3{
background-color: mediumorchid;
display: inline-block;
}
.container{
background-color: turquoise;
border: 1px solid white;
width: 180px;
height: 180px;
}
/* PARTE 1 */
.container1{
display: table-cell;
text-align: left;
vertical-align: top;
}
.container2{
display: table-cell;
text-align: left;
vertical-align: middle;
}
.container3{
display: table-cell;
text-align: left;
vertical-align: bottom;
}
/* PARTE 2 */
.container4{
display: table-cell;
text-align: center;
vertical-align: top;
}
.container5{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.container6{
display: table-cell;
text-align: center;
vertical-align: bottom;
}
/* PARTE 3 */
.container7{
display: table-cell;
text-align: right;
vertical-align: top;
}
.container8{
display: table-cell;
text-align: right;
vertical-align: middle;
}
.container9{
display: table-cell;
text-align: right;
vertical-align: bottom;
}
Cuando se busca posicionar un elemento al extremo inferior de su contenedor padre utilizando la propiedad de position: absolute, es mucho mas intuitivo utilizar bottom: 0; . Entiendo que dio el ejemplo de top: 100% y luego transform (0, -100%) para explicar el uso de esa ultima propiedad, pero al menos a mi me resulta contra intuitivo utilizarlo de esa forma. Puede tener mejores casos de aplicacion, distintos a ese
Aporte
left: 50%;
top: 50%;
//Para moverse los elementos toman como referencia el tamaño del elemento "container"
- Al usar left y top le estamos diciendo a nuestro “element” cual es la distancia en porcentaje que se va a mover de su ubicación actual tomando como referencia el tamaño del elemento “container”.
- Es decir que cuando le indicamos al elemento “top left” que se mueva un 100% en left en realidad le indicamos que se mueva 180px a la izquierda, ya que esta es la cantidad de pixeles que equivalen al 100% del “container”.
- Si fuera un 50% entonces serian 90px y así proporcionalmente.
- De igual manera sucede lo mismo con translate solo que en este caso la distancia en porcentaje que toma como referencia para moverse de su ubicación es el tamaño de el mismo.
transform: translate(50%, 50%);
//Al moverse el elemento toma como referencia el tamaño de el mismo.
Me parece bien saber como se utilizaban las técnicas enteriores a CSS Grid, en el caso que tengamos que modificar código de algún proyecto que lleve tiempo, tengamos varias alternativas para resolver estas alineaciones.
todavía no le entiendo muy bien a lo que hace transform: translate(0, -50px)
alguna alma caritativa que me ilustre que es lo que hace esta propiedad
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
font-family: 'Lato', sans-serif;
width: 550px;
}
.container {
background: turquoise;
width: 180px;
height: 180px;
position: relative;
}
.element {
width: 60px;
height: 60px;
text-align: center;
padding-top: 10px;
box-sizing: border-box;
}
.element1 {
@extend .element;
background: papayawhip;
position: absolute;
left: 0;
top:0 ;
}
.element2 {
@extend .element;
background: papayawhip;
position: absolute;
left:0 ;
top:50% ;
transform: translate(0 ,-50%);
}
.element3 {
@extend .element;
background: papayawhip;
position: absolute;
left:0 ;
bottom:0 ;
// transform: ;
}
.element4 {
@extend .element;
background: pink;
position: absolute;
left: 50%;
top:0;
transform:translate(-50%, 0) ;
}
.element5 {
@extend .element;
background: pink;
position: absolute;
left: 50%;
bottom: 50%;
transform: translate(-50%,50%);
}
.element6 {
@extend .element;
background: pink;
position: absolute;
left:50% ;
bottom:0;
transform:translate(-50%,0) ;
}
.element7 {
@extend .element;
background: lightcyan;
position: absolute;
right:0 ;
top:0;
// transform: ;
}
.element8 {
@extend .element;
background: lightcyan;
position: absolute;
right:0 ;
top:50% ;
transform:translate(0,-50%) ;
}
.element9 {
@extend .element;
background: lightcyan;
position: absolute;
right:0 ;
bottom:0;
}
pero que calidad platzi!!
soy nuevo en este mundo del desarrollo web, me estaba costando un poco css, hasta que vi esta clase
me perdi en el cuadrito
Yo lo que hice para comprender mejor fue poner en las pocisiones el 50% y en translate
fue el otro 50% sumado da el 100% ejemplo queremos poner un objeto a la lef: 50% position-x: -50%
Primero sumamos 50 + 50 = 100 pero como el eje x es negativo.
le restamos al 100% los 50
.element6 {
@extend .element;
background: pink;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 50%);
}
Y cual seria la diferencia de centrarlo con justify y align ya que a mi parecer se me hace mucho mas entendible y facil de usar que este tipo de posicionamiento, en donde me perdi un poco con el transform y sus valores🥴, y si deseo posicionar un elemento en específico lo hago con los margin y para que sea responsive le asigno valores relativos 🤷
Este método está muy piola 👍
super clara la explicacion y me encanto la clase!
No conocia la propiedad transform en este contexto. 🤯 Genial
La ventaja de estos métodos es que las alineaciones ya no dependen del tamaño de los contenedores o de los elementos. Les dejo mis aportes:
https://criniguez-curso-css-grid-layout.netlify.app/alineamiento/table-cell.html
https://criniguez-curso-css-grid-layout.netlify.app/alineamiento/position.html
👨💻 El transform: translate(x,y) reposiciona el origen de coordenadas del elemento, es decir el (0,0) con respecto sus dimensiones. Cabe mencionar que el top, right, left y bottom de position se calcula teniendo cuenta este punto origen.
.
Sin transform: translate(x,y):
.
Con transform: translate(x,y):
Yo aplique la técnica muy parecida como con el “margin” nada mas que ahora con el “position”, y creo que también es valida!
@import url(‘https://fonts.googleapis.com/css2?family=Lato&display=swap’);
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
font-family: ‘Lato’, sans-serif;
width: 550px;
}
.container {
background: turquoise;
width: 180px;
height: 180px;
position: relative;
}
.element {
width: 60px;
height: 60px;
text-align: center;
padding-top: 10px;
box-sizing: border-box;
}
.element1 {
@extend .element;
background: papayawhip;
position: absolute;
left: 0;
top: 0;
}
.element2 {
@extend .element;
background: papayawhip;
position: absolute;
left: 0;
top: 60px;
}
.element3 {
@extend .element;
background: papayawhip;
position: absolute;
left: 0;
top: 120px;
// transform: ;
}
.element4 {
@extend .element;
background: pink;
position: absolute;
left: 60px;
// transform: ;
}
.element5 {
@extend .element;
background: pink;
position: absolute;
left: 60px;
top: 60px;
// transform: ;
}
.element6 {
@extend .element;
background: pink;
position: absolute;
left: 60px;
top: 120px;
// transform: ;
}
.element7 {
@extend .element;
background: lightcyan;
position: absolute;
left: 120px;
// transform: ;
}
.element8 {
@extend .element;
background: lightcyan;
position: absolute;
left: 120px;
top: 60px;
// transform: ;
}
.element9 {
@extend .element;
background: lightcyan;
position: absolute;
left: 120px;
top: 120px;
// transform: ;
}
Genial, no conocía esa propiedad, table-cell.
esta emocionada la profesora, se equivoco mucho xd
table-cell
La ultima tecnica con los position y translate es una dulzura 🥰
banda, que atajo de teclado me quita las palabras comentadas?
De los cursos que he tomado hasta el momento, solo había visto las técnicas de margin y la de positions. Pero me agrada el ahora conocer line-height y table-cell, porque tarde o temprano los tendré que ocupar.
creo que me gusta mas usar calc para los position absolute
Positions: static, relative, absolute, fixed
Muy buen aporte, me ha ayudadomucho
Honestamente prefiero trabajar con calc() es más facil de entender y de aplicar. Aunque translate me parece igual de valido.
Position is very useful
Algo que no se explica en la clase es que display: table-cell; no funciona con grid layout.
En esta clase quedo bien explicado lo de positions en CSS, pero dejo la documentación de MDN sobre positions, para que puedan reforzar o si nos les quedo del todo claro ahí pueden encontrar mucha información que seguramente les ayudara, espero les ayude. 🔥👌
link: https://developer.mozilla.org/es/docs/Web/CSS/position
Dejo un enlace con contenido sencillo para entender la propiedad transform y como funciona translate. El elemento se mueve respecto su posición actual y, por lo tanto, tiene encuenta el tamaño específico que ocupa para calcular cuanto se “traslada”. El enlace a la guía.
Wao esta clase me gustó. Ahora comprendo más el bendito position absolute y relative.
Me puse a buscar información sobre transform porque me pareció curioso el hecho de que la profe pudo simplemente usar transform para ubicar cada elemento en su lugar y lo habría hecho con 1 sola línea de código para cada elemento, después de buscar un poco de información (que dejaré más abajo los videos que encontré) descubrí que al utilizar porcentajes no necesitamos estar cambiando el código cuando cambia el tamaño del elemento o cambia el tamaño del contenedor. Utilizando los porcentajes nos mantiene ubicados en la posición que necesitemos los elementos.
CSS Transform nota: este está en ingles
TRANSFORM-TRANSLATE en CSS este en español
¡Ojalá que le sirva a alguno la información!
Yo no conocía la propiedad tranform. Yo suelo usar calc. Que podemos usar para literalmente hacer operaciones, como sumas, restas, multiplicaciones o divisiones. Entonces, para posicionar un elemento de un ancho de 40px en el centro de manera horizontal hacemos lo siguiente:
left: calc(50% - 20px)
Donde el 20px representa la mitad del elemento que estamos moviendo.
Me gustó mucho la técnica positions. Muy intuitiva y cómoda.
hay varios elementos que con bottom y right podríamos ovbiar el transform
Les dejo la tabla de positions, me pareció muy buena información.
Que maravilla de clase, veo todo tan claro ahora 😄
Algo que me parece una mejor solución (por favor sean libres de corregirme) para no usar translate en este caso particular, es sabiendo que el elemento tiene una altura de 1/3 del contenedor padre, es decir 60px sobre los 180px del container, podemos usar
top: calc((100%/3) *2);
Y seria como decir ‘Ubicate empezando el 66% del viewport height’. O asi lo entienendo yo.
Muy bien explicado. De hecho las positions siguen siendo parte importante en CSS.
Jueguen con esto (En especial con la última opción del CSS demo): https://developer.mozilla.org/es/docs/Web/CSS/transform
Y entenderán transform 😄
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?