Después de esta lección, podrás:
- Posiciona los elementos en tu documento.
- Explica qué son las carrozas y cómo usarlas.
- Flota claro y entiende por qué es importante.
La propiedad CSS position le permite organizar elementos en la pantalla. La posición puede ser:
staticrelativefixedabsolute
Al configurar position, puede usar las siguientes propiedades:
toprightbottomleft
Let's take a look at the different ways to position elements!
El valor inicial o predeterminado de un elemento es static. Significa que el elemento no está posicionado de ninguna manera especial.
- Los elementos con
position: static, se describen como no posicionados. - Los elementos con cualquier otra forma de la propiedad
positionse describen como posicionados.
Un elemento posicionado "relativo" se comporta igual que "estático" a menos que agregue algunas propiedades adicionales. Puede ajustar la posición configurando top, left, right, y bottomproperties. Moverá el elemento relativo a donde normalmente ocurriría en el documento. Otro contenido * no * se ajustará para caber en cualquier espacio dejado por el elemento.
Para comprender mejor la propiedad position: relative, observe el siguiente ejemplo:
Para entender lo que está sucediendo, intente hacer esto:
- Elimina las propiedades izquierda y superior de la clase
relativa. El elementorelativese moverá a su lugar predeterminado. - Agregue las propiedades izquierda y superior con sus valores originales. El elemento se moverá relativamente desde su lugar predeterminado.
- Finalmente, descomenta el tercer elemento en el código HTML. Puede ver cómo la posición relativa ignora cualquier otro elemento en el HTML.
Un elemento fijo se coloca relativamente a la pantalla de su dispositivo (computadora, dispositivo móvil, etc.). El elemento siempre estará en el mismo lugar, incluso cuando se desplaza. Al igual que con relative, se usan las propiedades top, left, right, y bottom.
Aquí hay un ejemplo de cómo usar position: fixed:
La posición absoluta funciona de manera similar a la posición fixed, pero en lugar de estar posicionada en relación con la ventana gráfica, está posicionada al elemento * posicionado * más cercano en el DOM. Es decir, el elemento más cercano con un position que no sea static.
Si no hay un elemento ancestro posicionado en el documento, usará el body.
Mira el siguiente ejemplo:
Como puede ver, hay dos elementos div, uno sobre el otro. Si inspecciona el código de Codepen, puede ver que los elementos de página absolutamente posicionados se eliminan del flujo de la página. Esto significa que no afectan la posición de otros elementos, y los otros elementos no los afectarán.
Normalmente, los elementos HTML siguen un flujo normal, colocando un elemento * al lado * (en línea) o * debajo * (bloque) del otro. La propiedad float especifíca que un elemento debe salirse del flujo normal y colocarse a lo largo del lado izquierdo o derecho de su contenedor. El texto y los elementos en línea lo envolverán.
Float puede tomar los siguientes valores:
izquierda. El elemento debe flotar en el lado izquierdo de su bloque contenedor.derecho. El elemento debe flotar en el lado derecho de su bloque contenedor.ninguno. El elemento no flota.heredarTomará el valor flotante del contenedor padre del elemento.
Ten en cuenta que los elementos flotantes permanecen como parte del flujo de la página web. Esto es diferente a los elementos de página que usan posicionamiento absoluto.
Puedes usar 'floats' para varias cosas. Puede envolver texto alrededor de imágenes o elementos HTML utilizándolo, como puedes ver aquí:
Pero este no es el único uso de la propiedad float. Puede usar flotantes para crear diseños web completos. Por ejemplo, aquí puede ver un pequeño ejemplo con un diseño web normal compuesto por elementos flotantes:
Puedes ver cómo usamos float para alinear los elementos div dándoles el mismo valor.
¿Te parece familiar? ¡Exactamente! ¡Es el diseño de Facebook! :)
La propiedad clear tiene cuatro valores válidos:
left: borra el float del lado izquierdo.right: borra el float del lado derecho.both: borra los floats procedentes de ambas direcciones.none: el valor predeterminado. Por lo general, es innecesario a menos que esté eliminando un valor claro heredado de cascada.
Cuando trabajas con floats, tarde o temprano necesitarás clear. Un elemento con la propiedad clara en él no se moverá hacia arriba junto al float como lo desea el float, sino que se moverá * hacia atrás * el float. Mira este ejemplo:
clear de la clase .footer y ver qué pasa con los otros elementos.
La barra lateral flota a la derecha y es más corta que el área de contenido principal. Luego se requiere que el pie de página salte al espacio disponible como lo requiere el flotador. El pie de página se puede borrar para garantizar que permanezca debajo de ambas columnas flotantes.
Después de esta iteración, ¡nuestro sitio web IronSkydive ya casi habrá terminado! Cambiemos el diseño para organizar los diferentes elementos de la página.
Terminemos la barra de navegación. En este momento, nuestros elementos se ven como una lista. Cambiemos eso flotando los elementos a la izquierda. Agregua la propiedad float a la clase nav-bar-li para hacer esto.
Después de eso, todos los elementos están en el lado izquierdo del contenedor. Vamos a darles un width para corregir esto. Haga cada li de 33%.
De acuerdo, estamos flotando elementos, pero no queremos usar clear para el float aquí todavía. En la siguiente sección de esta iteración, vamos a crear nuestra clase clear, pero en este momento agregaremos height a la clase nav-bar. Agregue una altura de 40px y tu barra de navegación estará terminada.
¿Por qué no usamos la clase clear?
Queremos que aprendas diferentes cosas para hacer lo mismo. Cuando tienes un contenido de una línea, es suficiente para dar un alto a un elemento HTML existente. Su rendimiento es mejor que agregar un nuevo elemento HTML para borrar los floats.
Vas a colocar el aside en una posición mejor de lo que está ahora. Agrega position en absolute. A continuación, agregua las propiedades de CSS necesarias para que sea un 10% a la izquierda y un 15vh desde la parte inferior.
Usa las propiedades de posición left, y bottom para hacer esto. Recuerde que has creado una clase quote que se aplica a tu etiqueta HTML aside.
Para finalizar esta sección, agregua un atributo position: relative a la clase CSS header. Si no haces eso, la quote se posicionará en relación con el<body>en lugar del header, y no quieres eso, ¿no? :)
En la iteración anterior, mencionamos que CSS se debe reutilizar a lo largo del proyecto. Si echas un vistazo al resultado final que queremos lograr, hay varias columnas en nuestro diseño. Ahora, crearás las clases necesarias para estas columnas.
Primero, creemos una clase col, que tendrá solo una propiedad:
.col { float: left; }
Luego, si echas un vistazo al diseño, verás que tienes dos secciones con tres columnas cada una. Si piensas en eso en porcentaje, podrás completar la siguiente clase:
.col-3 { } /* 30% | 30% | 30% */
Te en cuenta que vas a combinar tanto col como col-3 para crear los diseños deseados.
¿Por qué la clase col-3 usa un ancho30%para cada columna? La columna del medio tendrá una clase extra para aplicar un margen de 5% en los lados, sumando 100% del espacio(box model).
Por lo tanto, también deberás agregar una clase col-middle al CSS con un margen de 5% en ambos lados:
.col-middle { } /* 5% | content | 5% */
Por último, y lo más importante, debes crear una clase clearfix. Recuerde que esta clase le permitirá borrar todos los elementos flotantes, para evitar comportamientos * extraños * en tus diseños, como divs colapsando:
.clearfix { clear: both; }
Una vez que hayas completado estas clases, estás listo para seguir adelante. Volvamos a la sección 1. Debes tener tres columnas diferentes, una columna por artículo.
Agregue las clases col col-3 a cada artículo.
Ahora, bajo el último artículo, crea un div con la clase clearfix. El resultado debería ser el siguiente:
Hagamos que los botones azules se vean como botones reales. En la clase link-btn, agrega display con block como valor.
display está cambiando el elemento de en línea a bloque, o viceversa.
Una etiqueta a es un elemento en línea por defecto, por lo que no podemos agregar propiedades como relleno y margen. Convertir esto en un elemento de bloque nos permite hacerlo.
Una vez que actualices la página, los botones usarán el 100% del contenedor. Cambiemos eso:
- Ancho:
150px. - Margen: superior:
40px; derecha:auto; abajo:0; izquierda:auto. - Relleno: arriba:
14px; derecha:20px; abajo:14px; izquierda:20px. - Borde: ancho:
2px; color:negro; estilo:sólido; opacidad:0.2. Mira la lección de Color para hacer eso.
Esta sección está terminada. El resultado es sorprendente, ¿no?
En esta sección, tiene cuatro cuadros diferentes que colocará en una cuadrícula de 2x2. En este caso, las cajas están usando 40% del espacio del contenedor, y cada una tiene un margen de 5% en los lados.
Para obtener la cuadrícula de 2x2, flote 'las casillas al izquierdo. Puedes hacer esto agregando la clase col a cada artículo`.
Además, agregue un div con la clase clearfix para borrar los flotantes de los elementos. Tu diseño final debería ser así:
Esta sección tiene la misma estructura que la Sección 1.
Agregua las clases col col-3 a cada artículo dentro de la sección. En la columna central, agregua la clase col-middle.
Una vez que hayas agregado las clases, recuerda agregar un div con la clase clearfix en la parte inferior de los elementos para borrar todos los flotadores.
Una vez que haya terminado con el sistema de cuadrícula, agreguemos algunos estilos a los nombres de los miembros del equipo. Recuerda que creaste una clase member-name y la asignaste a cada b en tu HTML. Agregua propiedades a la clase para mostrar b como bloque, y centra el texto.
Has terminado otra sección, ¡sigamos!
Nada que hacer aquí todavía. En la próxima iteración, trabajaremos solo en esta sección. :)
En este momento, aquí tienes una sección con información dentro. Vamos a completar parte del sitio web. Primero, debajo de la etiqueta section, agregua la siguiente secuencia de comandos:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.142047744348!2d2.3354330160472316!3d48.87456857928921!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e38f817b573%3A0x48d69c30470e7aeb!2sIronhack!5e0!3m2!1sen!2ses!4v1495208746099" class="map-frame" frameborder="0" style="border:0" allowfullscreen></iframe>
Este es un [iframe] de Google Maps(https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe), y te ayudará a insertar un mapa en tu pie de página! Ya tienes una clase asignada, map-frame. Vamos a crear la clase en nuestro CSS y agregarle los siguientes estilos:
- Altura:
375px. - Flotador:
derecho. - Ancho:
60%.
Una vez que hayas definido estos estilos, ajuste todo el contenido dentro de un div con la clase contenedor. Tienes que poner dentro de este 'div' tanto el section como el iframe en tu HTML.
Ahora, agregua las clases col col-3 a la primera 'sección' en el pie de página. Esto creará una columna a la izquierda del pie de página.
Además, agregua un div con la clase clearfix debajo del elemento iframe.
Para finalizar esta sección, configura list-style-type en none en la sección Redes sociales. ¿Cuál es la mejor manera de hacer eso? El resultado final debería ser este:
/Happy coding!
En esta lección, has aprendido cómo colocar elementos de bloque en su página. Has visto que las propiedades top, right, bottom, y left te ayudan a posicionar los elementos como desees.
También has aprendido cuáles son los elementos float y qué problemas pueden surgir al usarlos, y cómo los movimientos de limpieza puedes aliviar algunos de estos problemas.
El posicionamiento es la columna vertebral de CSS. Es lo básico de cómo puedes tomar un documento aburrido y convertirlo en algo realmente agradable. También es * una de las partes más complicadas * de CSS, así que no se desanime si lo encuentras difícil. ¡La práctica hace la perfección!
- MDN propiedad
position- Vea toda la información detallada sobre la propiedad en su documentación. - Todo sobre Floats - Artículo muy interesante de css-tricks con toda la información dobre Floats
- Cómo y porqué limpiar floats - Otro artículo interesante sobre cómo y por qué tenemos que limpiar Floats en nuestros sitios web.
- Posicionamiento en CSS 101
- Posicionamiento Detallado