En el Curso de Animaciones con CSS la profesora hizo un jueguito que hace uso del contexto de apilamiento, y ahí les puse este gif que explica cómo funciona 👇👀:
.
.
Básicamente son capas que hay una encima de la otra, entonces a medida que vas poniendo más y más estas se van apilando.
.
Esto sucede cuando empezamos a hacer uso de position y es ahí en donde entra en juego la propiedad z-index, básicamente porque ahora estamos trabajando en el eje Z. El eje Z es el que va desde la pantalla hacia ti 🤯.
Introducción al desarrollo frontend
Inicia tu camino como frontend developer
¿Qué es HTML y CSS? ¿Para qué sirven?
Motores de render: de archivos a píxeles
Quiz: Introducción al desarrollo frontend
Maquetación con HTML
Anatomía de un documento HTML y sus elementos
¿Qué es HTML semántico?
Etiquetas de HTML más usadas
Maquetación con CSS
Anatomía de una declaración CSS: selectores, propiedades y valores
Tipos de selectores: básicos y combinadores
Tipos de selectores: pseudoclases y pseudoelementos
Cascada y especificidad en CSS
Tipos de display más usados: block, inline e inline-block
Tipos de display más usados: flexbox y CSS grid
Modelo de caja
Colapso de márgenes
Posicionamiento en CSS
Z-index y el contexto de apilamiento
Propiedades y valores de CSS más usados
Diseño responsivo
Unidades de medida
Responsive Design
Quiz: Diseño responsivo
Arquitecturas en CSS
¿Qué son las arquitecturas CSS? ¿Para qué sirven?
OOCSS, BEM, SMACSS, ITCSS y Atomic Design
Quiz: Arquitecturas en CSS
Próximos pasos
CSS para entrevistas y mundo laboral
Continúa con el Curso Práctico de Frontend Developer
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Z-index y el contexto de apilamiento
16/23Recursos
Aportes 91
Preguntas 16
Ordenar por:
Reto: Intenta recrear esta figura usando las propiedades vistas en clase.
El codigo usado lo dejo abajo (intenta hacerlo por tu cuenta antes de consultarlo)
Herramienta para obtener degradados en codigo css: https://cssgradient.io/ (lo pueden añadir a los marcadores de su navegador con ctrl+D)
<!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>Circle challenge</title>
<style>
div
{
left: 43%;
position: absolute;
width: 100px;
height: 100px;
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
border-radius: 50%;
}
.circle-1
{
top: 50px;
z-index: 0;
}
.circle-2
{
top: 100px;
z-index: -1;
}
.circle-3
{
top: 150px;
z-index: -2;
}
.circle-4
{
top: 200px;
z-index: -3;
}
</style>
</head>
<body>
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
<div class="circle-4"></div>
</body>
</html>
Practicando con los ejercicios de algunos compañeros llegue a este resultado!
-Pero hay que tener dos cosas muy claras:
La propiedad z-index solo se aplica a elementos posicionados. Los elementos no posicionados siempre se van a colocar uno en encima de otro en el orden en el que aparecen en el código.
La propiedad z-index no es heredable.
Definir la propiedad z-index con un valor diferente a auto crea un stacking context, un contexto de apilamiento. También se crea un stacking context en todos los elementos con position: fixed o sticky. Luego veremos qué significa esto.
.gris, .rojo, .verde {
position: absolute;
}
.gris {
z-index: 2;
}
.verde {
z-index: 3;
}
.azul {
z-index: 100; // Sin efecto, es un elemento no-posicionado.
}
Esta es mi práctica, un lindo pavo real utilizando z-index
ejemplos que me gustaron
Z-index nos permite ajustar el orden de las capas de los objetos cuando el contenido está siendo renderizado.
** Esto es un modal
Práctica de apilamiento y un poco de arte.
<code>
<!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>Collage</title>
<style>
body{
background-color: black;
}
div{
left: 43%;
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.circle-1{
top: 100px;
left: 600px;
z-index: 2;
background: linear-gradient(4deg, rgba(255,189,53,1) 0%, rgba(63,167,150,1) 49%, rgba(80,32,100,1) 100%);
}
.circle-2{
top: 150px;
left: 500px;
z-index: 3;
background: linear-gradient(270deg, rgba(255,189,53,1) 0%, rgba(63,167,150,1) 49%, rgba(80,32,100,1) 100%);
}
.circle-3{
top: 150px;
left: 700px;
z-index: 4;
background: linear-gradient(84deg, rgba(255,189,53,1) 0%, rgba(63,167,150,1) 49%, rgba(80,32,100,1) 100%);
}
.circle-4{
top: 250px;
left: 600px;
z-index: 5;
background: linear-gradient(180deg, rgba(255,189,53,1) 0%, rgba(63,167,150,1) 49%, rgba(80,32,100,1) 100%);
}
.circle-5{
top: 50px;
left: 500px;
z-index: 1;
background: linear-gradient(344deg, rgba(255,189,53,1) 0%, rgba(255,99,99,1) 50%, rgba(80,32,100,1) 100%);
}
.circle-6{
top: 50px;
left: 700px;
z-index: 1;
background: linear-gradient(344deg, rgba(255,189,53,1) 0%, rgba(255,99,99,1) 50%, rgba(80,32,100,1) 100%);
}
.circle-7{
top: 300px;
left: 500px;
z-index: 1;
background: linear-gradient(344deg, rgba(255,189,53,1) 0%, rgba(255,99,99,1) 50%, rgba(80,32,100,1) 100%);
}
.circle-8{
top: 300px;
left: 700px;
z-index: 1;
background: linear-gradient(344deg, rgba(255,189,53,1) 0%, rgba(255,99,99,1) 50%, rgba(80,32,100,1) 100%);
}
.circle-9{
top: 0px;
left: 600px;
z-index: 0;
background: linear-gradient(95deg, rgba(255,201,0,1) 0%, rgba(124,165,255,1) 51%, rgba(255,248,154,1) 100%);
}
.circle-10{
top: 150px;
left: 400px;
z-index: 0;
background: linear-gradient(95deg, rgba(255,201,0,1) 0%, rgba(124,165,255,1) 51%, rgba(255,248,154,1) 100%);
}
.circle-11{
top: 150px;
left: 800px;
z-index: 0;
background: linear-gradient(95deg, rgba(255,201,0,1) 0%, rgba(124,165,255,1) 51%, rgba(255,248,154,1) 100%);
}
.circle-12{
top: 350px;
left: 600px;
z-index: 0;
background: linear-gradient(95deg, rgba(255,201,0,1) 0%, rgba(124,165,255,1) 51%, rgba(255,248,154,1) 100%);
}
</style>
</head>
<body>
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
<div class="circle-4"></div>
<div class="circle-5"></div>
<div class="circle-6"></div>
<div class="circle-7"></div>
<div class="circle-8"></div>
<div class="circle-9"></div>
<div class="circle-10"></div>
<div class="circle-11"></div>
<div class="circle-12"></div>
</html>
De la clase pasada lo que hice fue agregar los z-index en el .container y el .nav, de tal manera que el .container no se sobrepusiera sobre el nav. Así me quedo el css:
Le puse un z-index mayor al nav para que estuviera arriba del container-
.container {
width: 200px;
height: 200px;
background: peachpuff;
position: relative;
top: 20px;
z-index: 1;
}
.item {
width: 20px;
height: 20px;
background: hotpink;
position: absolute;
right: 0;
}
nav {
width: 100%;
height: 60px;
background: lightcyan;
position: fixed;
z-index: 2;
}
ul p{
position: sticky;
top: 0;
}
Aquí una captura de como quedo:
Notes:
- El contexto de apilamiento se trata sobre el eje Z, el cual es un eje invisible que va desde la pantalla hacia el usuario
- Tenemos los diferentes elementos HTML uno encima del otro
- El contexto de apilamiento se puede dar de 2 maneras:
- El orden del HTML importa al momento de crear capas del eje Z, y se da dependiendo del tipo de position del elemento (principalmente absolute)
- Utilizando la propiedad Z-index, esta propiedad solo funciona con determinados tipo de position y nos sirve para “organizar” nuestras capas
- El Z-index respeta el orden y valor de Z-index de los elementos padre
- Si dos elementos tienen position absolute, siempre quedara encima del contexto de apilamiento el elemento que se encuentre “debajo” del otro
Z-INDEX
Indica el orden de un elemento posicionado y sus descendientes.
Cuando varios elementos se superponen, los elementos con mayor valor z-index cubren aquellos con menor valor
El Z-index me ha sido de utilidad como usuario, en algunos sitios hay elementos que bloquean la visibilidad de algún otro elemento que requiero ver, para ello con ayuda del inspector de elementos cambio el valor a negativo de Z-index del que está sobre el que necesito, de esta forma ese elemento que está bloqueando pasa a la parte de atrás y deja de obstaculizar el que requiero.
.
.
.
.
.red{
width: 100px;
height: 100px;
background: red;
z-index: 5;
border: 3px solid black;
color: aliceblue;
}
.blue{
width: 100px;
height: 100px;
background: blue;
z-index: 4;
top: 110px;
left: 520px;
border: 3px solid black;
color: aliceblue;
}
.yellow{
width: 100px;
height: 100px;
background: yellow;
z-index: 6;
top: 30px;
left: 30px;
border: 3px solid black;
color: purple;
}
</style>
Ejemplo sencillo!
Pero que util es el z-index 😃
_Me basé de unos ejercicios de algunos compañeros y este fue el resultado.
Sé que no es mucho pero estoy contenta de que sí me salió n.n.
Explorando e integrando cosas vistas hasta el momento!!!
Hola, comparto mi practica
<!-- main>(section.hat>(.cup_$)*2)+(section.head>(div.eye)*2+.mouth)+(section.body>(.buttons)*3)+(section.footer>.foot) -->
<main>
<div class="muñeco__nieve">
<section class="hat">
<div class="cup_1"></div>
<div class="cup_red"></div>
<div class="cup_2"></div>
</section>
<section class="head">
<div class="eye"></div>
<div class="eye"></div>
<div class="mouth"></div>
</section>
<section class="body">
<div class="buttons"></div>
<div class="buttons"></div>
<div class="buttons"></div>
</section>
<section class="footer">
<div class="buttons"></div>
<div class="buttons"></div>
<div class="buttons"></div>
</section>
</div>
</main>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
main {
width: 100wh;
height: 100vh;
background-color: skyblue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
position: relative;
}
.muñeco__nieve {
width: 100px;
height: 450px;
/* border: 1px solid #444; */
position: relative;
}
/* ------------------------------ Hat ------------------------------ */
.hat {
width: 30px;
height: 25px;
/* background-color: aliceblue; */
position: relative;
margin: auto;
z-index: 5;
}
.cup_1 {
width: 20px;
height: 20px;
background-color: #555;
position: absolute;
left: 5px;
}
.cup_red {
width: 20px;
height: 5px;
background-color: red;
position: absolute;
left: 5px;
bottom: 5px;
}
.cup_2 {
width: 30px;
height: 5px;
background-color: #555;
position: absolute;
bottom: 0;
}
/* ------------------------------ Hat ------------------------------ */
/* ------------------------------ Head ------------------------------ */
.head {
height: 50px;
width: 50px;
background-color: aliceblue;
border-radius: 50%;
position: absolute;
top: 21px;
left: 50%;
z-index: 4;
transform: translate(-50%);
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas:
"eye1 space eye2"
"nose nose nose"
"mouth mouth mouth";
place-content: center;
/* margin: auto; */
border: 1px solid #444;
}
.eye {
width: 9px;
height: 9px;
background-color: #444;
border-radius: 50%;
}
.eye:nth-child(1) {
place-self: end;
grid-area: eye1;
background-color: aqua;
}
.eye:nth-child(2) {
align-self: end;
grid-area: eye2;
background-color: violet;
}
.mouth {
background-color: #444;
justify-self: center;
width: 20px;
height: 3px;
grid-area: mouth;
}
/* ------------------------------ Head ------------------------------ */
/* ------------------------------ Body ------------------------------ */
.body {
width: 65px;
height: 65px;
background-color: aliceblue;
border-radius: 50%;
position: absolute;
top: 62px;
left: 50%;
z-index: 3;
transform: translate(-50%);
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
border: 1px solid #444;
}
.buttons {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ff0022;
/* display: inline; */
z-index: 4;
}
/* ------------------------------ Body ------------------------------ */
/* ------------------------------ Footer ------------------------------ */
.footer {
width: 80px;
height: 80px;
background-color: aliceblue;
border-radius: 50%;
position: absolute;
top: 100px;
left: 50%;
transform: translate(-50%);
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
border: 1px solid #444;
}
/* ------------------------------ Footer ------------------------------ */
¡Listo!
<title>Document</title>
<style>
div {
position: absolute;
background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}
.square {
right: 28%;
top: 70px;
z-index: 0;
width: 50px;
height: 50px;
}
.square-2 {
right: 30%;
top: 100px;
z-index: 1;
width: 75px;
height: 75px;
}
.square-3 {
right: 35%;
top: 150px;
z-index: 2;
width: 100px;
height: 100px;
}
.square-4 {
right: 40%;
top:200px;
z-index: 3;
width: 125px;
height: 125px;
}
</style>
</head>
<body>
<section>
<div class="square"></div>
<div class="square-2"></div>
<div class="square-3"></div>
<div class="square-4"></div>
</section>
</body>
</html>
Creo debió poner en el div amarillo un z-índex mayor ( z-index: 2; ) que el div rojo, para demostrar que se respeta la jerarquía padre-hijo.
.yellow{
width: 200px;
height: 200px;
background: yellow;
z-index: 2;
}
Aporte z-index
-
Se tienen 3 contenedores
a. div ( Contenedor de titulo) z-index: 1
b. div ( Contenedor de figuras) z-index: 2
c. svg ( Contenedor de circulos) z-index: 3 -
El contenedor de mayor relevancia es el svg, que sobrepone al contenedor de las figuras
-
El contenedor de figuras no sobrepone al contenedor de titulo, debido a que este tiene la propiedad overflow: hidden. de no tener esta propiedad pasaria a funcionar el z-index de este elemento
The stacking context
excelente clase
![](``
<!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>Document</title>
<style>
div {
left: 43%;
position: absolute;
width: 100px;
height: 100px;
background: linear-gradient(180deg, #0277BD 0%, #1E88E5 35%, #90CAF9 100%);
border-radius: 40%;
}
.c1
{
width: 205px;
height: 90px;
top: 50px;
z-index: 0;
}
.c2
{
width: 250px;
height: 300px;
top: 20px;
z-index: -1;
background: linear-gradient(180deg, #E53935 0%, #E53935 35%, #FFCDD2 100%);
}
.c3
{
height: 150px;
top: 200px;
z-index: -2;
background: linear-gradient(180deg, #E53935 0%, #E53935 35%, #FFCDD2 100%);
}
.c4
{
height: 150px;
left: 60%;
top: 200px;
z-index: -3;
background: linear-gradient(180deg, #E53935 0%, #E53935 35%, #FFCDD2 100%);
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</body>
</html>
Mi aporte para el reto:
El código es el siguiente:
https://codepen.io/pyxel7/pen/rNpobjw
Creo que hay un error en el minuto 3 y el codigo seria
<div class="red"></div>
<div class="blue">
<div class="yellow"></div>
</div>
De resto, es genial este tema! En especial porque el hacer un pop-up es mas dificil de lo que parece! Son muchas lineas de codigo
CSS tiene muchos usos, he visto que se pueden realizar incluso dibujos.
¡Esto es super importante!
Yo tuve DOLORES DE CABEZA debido a no entender bien el z-index, ponía números grandisimos “10000” o así y no se posicionaba al frente, no tenía ni idea de que era porque el padre estaba atrás del otro elemento
<style>
div{
position: absolute;
width: 100px;
height: 100px;
}
.red{
background-color: red;
z-index: 5;
}
.blue{
margin: 25px;
background-color: blue;
z-index: 4;
}
.yellow{
margin: 50px;
background-color: yellow;
z-index: 6;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue">
<div class="yellow"></div>
</div>
</body>
Dejo acá mi resultado:
HTML:
<section class="container">
<div class="box red">Red</div>
<div class="box blue">Blue</div>
<div class="box yellow">Yellow</div>
</section>
CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
background: palegoldenrod;
display: grid;
height: 100vh;
place-items: center;
width: 100%;
}
.box {
border: 4px solid black;
border-radius: 10px;
display: grid;
font-family: monospace;
font-size: 18px;
font-weight: bold;
height: 100px;
place-items: center;
position: absolute;
width: 100px;
}
.red {
background: red;
bottom: 170px;
left: 140px;
z-index: 2;
}
.blue {
background: blue;
bottom: 240px;
z-index: 0;
}
.yellow {
background: yellow;
bottom: 150px;
right: 150px;
z-index: 1;
}
Este es el eje z
Recuerden que eje z hace referencia a lo que va desde la pantalla hacia ti
hay un error en el código que aparece en la imágen de ejemplo verdad? la etiqueta <div class=“blue”> no debería cerrarse en la línea 2
Práctica z-index y position
Comparto la codificación y documentación de todo lo que se ha aprendido a lo largo de este curso. Lo creé como un repositorio de git
Básicamente si entendí bien, el Z-index maneja la profundidad de un elemento, así como cuando movemos objetos de izquierda a derecha o arriba a abajo haciendo uso de los ejes X y Y.
Pues Tratando de acomodar las cajitas del apunte!
We are Plaziers ❤️
Probando z-index
Aquí el reto:
<style>
body {
margin: 0;
}
nav {
position: absolute;
position: fixed;
}
ul {
display: flex;
list-style-type: none;
justify-content: space-around;
}
li a {
text-decoration: none;
color: white;
}
p {
position: relative;
top: 0;
}
.item1 {
width: 100%;
height: 50px;
background-color: blue;
z-index: 1;
}
.item2 {
width: 100%;
height: 100px;
background-color: green;
}
</style>
<nav class="item1">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<div class="item2"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae dignissimos neque numquam, amet tenetur quae laborum in consequuntur rerum maxime repellat facere consectetur id cupiditate, facilis obcaecati laudantium. Et ratione dicta porro amet veritatis, eius dolorum facere labore libero voluptatum tempore molestiae ad odit perferendis voluptates deleniti vero odio impedit voluptas cum, asperiores eligendi! Quidem sed animi dicta, adipisci placeat porro dolores eum corporis perspiciatis quis ab eveniet sint quibusdam quos reiciendis assumenda voluptates voluptas at laudantium explicabo maxime deserunt illum architecto provident? Fugiat amet, facilis nulla excepturi alias laborum enim veniam totam corrupti nam, eligendi ea asperiores sunt est dignissimos. </p>
Me encanto lo que hice, sencillo pero lo hice sola
me encanta como enseña la profe 10/10
Les comparto un pequeño aporte sobre lo realizado en la clase
estoy utilizando la propiedad z-index para tener los cuadros a forma de notas, sobre el texto de “platzi master” le añadí un poco de margen, les comparto mi código
<!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>Document</title>
<style>
div{
/* background: palegoldenrod; */
position: absolute;
}
.one{
z-index: 10;
}
.two{
z-index: 9;
margin-top: 12px;
}
.two::before{
content: "in ";
}
section div{
width: 150px;
height: 150px;
padding: 30px;
box-sizing: border-box;
}
.red{
background: red;
z-index: 1;
left: 60px;
}
.blue{
background: blue;
z-index: 2;
left: 90px;
top: 60px;
}
.yellow{
background: yellow;
z-index: 3;
left: 120px;
top: 120px;
}
</style>
</head>
<body>
<div class="one">Master</div>
<div class="two">Platzi</div>
<section>
<div class="red">Red</div>
<div class="blue">Blue</div>
<div class="yellow">Yellow</div>
</section>
</body>
</html>
Explicación del ejemplo para entender el apilamiento de Z-index.
Eje z
Aquí uno de los retos que dejó un compa:
This is exactly how z-index works:
Mi forma de explicarlo
<body>
<!-- <div class="one">Master</div> Eso yo no lo puse
<div class="two">Plazi</div> -->
<section>
<div class="red">Red</div> <!--Padre, honor alto y sin hijo que lo superé-->
<div class="blue">Blue <!--Padre, honor medio e hijo que superó en honor-->
<div class="yellow">Yellow</div> <!--Hijo, con honor alto, pero solo comparar con padre-->
</div>
</section>
</body>
Hola, les quiero compartir un pequeño ejercicio que hice para practicar con z-index y position: sticky.
Aquí está el enlace por si quieren verlo: https://miguel-angelrc.github.io/curso-frontend/9_z-index.html
si hacen scroll podrán ver el efecto de z-index y position: sticky
Y el código por si quieren practicar 😃
<!DOCTYPE html>
<html lang="es">
<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>Z-Index</title>
<!-- Z-index entre hermanos -->
<style>
*{
margin: 0px;
padding: 0px;
}
div{
position: sticky;
top: 0px;
height: 100px;
margin: auto;
margin-top: -25px;
opacity: 0.7;
box-sizing: border-box;
padding: 40px 0px 0px 5%;
font-size: 2em;
font-weight: bold;
font-family: -apple-system, 'Helvetica Neue';
}
#one{
margin-top: 0px;
width: 90%;
background: #F55353;
z-index: 10; /* <-- Cambiar valor */
}
#two{
width: 85%;
background: #00FFDD;
z-index: 25; /* <-- Cambiar valor */
}
#three{
width: 80%;
background: #F2FA5A;
z-index: 15; /* <-- Cambiar valor */
}
</style>
</head>
<body>
<div id="one"> 10 </div>
<div id="two"> 25 </div>
<div id="three"> 15 </div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Por último, la guía en donde me apoye: https://dev.to/lupitacode/guia-completa-y-practica-sobre-posicionamiento-css-z-index-y-stacking-context-57ig
Solo agregue algo al ejercicio de la clase 😃
<!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>z-index</title>
<style>
div{
position: absolute;
background: palegoldenrod;
}
.one{
z-index: 5;
}
.two{
z-index: 4;
}
.red{
width: 20px;
height: 20px;
background: red;
z-index: 4;
top: 20px;
}
.blue{
width: 20px;
height: 20px;
background: rgb(21, 0, 255);
z-index: 3;
right: 83%;
top: 10%;
}
.yellow{
width: 20px;
height: 20px;
background: rgb(255, 208, 0);
z-index: 5;
top: 15px;
right: 2px;
}
.uno{
width: 50px;
height: 50px;
background: rgb(0, 255, 21);
z-index: 1;
}
.unouno{
width: 20px;
height: 20px;
background: rgb(255, 136, 0);
z-index: 1000;
right: 0px;
top: 23%;
}
</style>
</head>
<body>
<section>
<div class=“red”></div>
<div class=“blue”>
<div class=“yellow”></div>
</div>
<div class=“uno”>
<div class=“unouno”></div>
</div>
</section>
</body>
</html>
flor
<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>Document</title>
<style>
body{
margin: 0;
background: black;
}
.sol {
height: 200px;
width: 200px;
background-color: yellow;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
z-index: 5;
}
.punta1{
background-color: rgb(55, 255, 0);
height: 200px;
width: 200px;
border-radius: 10px 500px / 10px 350px;
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
transform: rotate(30deg);
}
.punta2{
background-color: rgb(55, 255, 0);
height: 200px;
width: 200px;
border-radius: 10px 500px / 10px 350px;
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
transform: rotate(60deg);
}
.punta3{
background-color: rgb(55, 255, 0);
height: 200px;
width: 200px;
border-radius: 10px 500px / 10px 350px;
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
transform: rotate(90deg);
}
.punta4{
background-color: rgb(55, 255, 0);
height: 200px;
width: 200px;
border-radius: 10px 500px / 10px 350px;
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
transform: rotate(120deg);
}
.punta5{
background-color: rgb(55, 255, 0);
height: 200px;
width: 200px;
border-radius: 10px 500px / 10px 350px;
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
transform: rotate(150deg);
}
.punta6{
background-color: rgb(55, 255, 0);
height: 200px;
width: 200px;
border-radius: 10px 500px / 10px 350px;
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="sol">
</div>
<div class="punta1"></div>
<div class="punta2"></div>
<div class="punta3"></div>
<div class="punta4"></div>
<div class="punta5"></div>
<div class="punta6"></div>
</body>
Z-Index
Cuando los elementos son posicionados para superponerse (i.e. usando position: absolute | relative | fixed | sticky), el elemento que viene después dentro del marcado HTML aparecerá, por defecto, encima de los otros elementos. Sin embargo, la propiedad z-index puede especificar el orden de cómo los elementos están apilados unos sobre otros. Debe ser un entero (i.e. un número entero y no un decimal), y los elementos que mayor valor tengan en z-index serán movidos más arriba en la pila de elementos que aquellos con valores menores.
Quien mas intento hacer la explicion de los cuadros con z-index? 😃
Html
<div class="box">
<div class="blue">
I am Blue
<div class="yellow">I am yellow</div>
</div>
<div class="red">I am Red</div>
</div>
Css
.box{
width: 200px;
height: 200px;
background-color: wheat;
position: relative;
border: 2px solid;
}
.red{
width: 50px;
height: 50px;
background-color: red;
z-index: 5;
position: absolute;
top: 30px;
}
.blue{
width: 50px;
height: 50px;
background-color: blue;
z-index: 4;
position: absolute;
left: 40px;
}
.yellow{
width: 60px;
height:60px;
background-color: yellow;
z-index: 6;
position: absolute;
left: 10px;
}
Siempre he tenido problemas para el posicionamiento en el CSS. Después de muchos años finalmente entendí con este curso. Muchas gracias Estefany!
No entendi
Fenomenal!!!
Usen siempre Z-Index en decenas (10,20,30) porque si quieren agregar un elemento en medio ya no sera necesario modificar todos los Z-Index.
Basta con poner un 25 al nuevo elemento por ejemplo.
Dejo mi aporte: https://imgur.com/a/PYTTemR Yo dibujé las montañas y el techo de la casa
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Prueba con Z-index</title>
<link rel="stylesheet" href="./z_index.css">
</head>
<body>
<h1>Prueba con Z-index</h1>
<p>Hoy vamos a intentar jugar con z-index</p>
<section class="dibujo">
<section class="cielo">
<div class="sol"></div>
<div class="nube_1">
<img src="./nube.png" alt="https://www.pikpng.com/pngl/m/131-1319710_nube-png-clipart.png">
</div>
<div class="nube_2">
<img src="./nube.png" alt="https://www.pikpng.com/pngl/m/131-1319710_nube-png-clipart.png">
</div>
</section>
<section class="montanas">
<div class="montana1"><img src="./montaña.png" alt=""></div>
<div class="montana2"><img src="./montaña.png" alt=""></div>
<div class="montana3"><img src="./montaña.png" alt=""></div>
<div class="montana4"><img src="./montaña.png" alt=""></div>
</section>
<section class="casa">
<div class="techo">
<img src="./techo.png" alt="">
</div>
<div class="piso1">
<div class="puerta"></div>
<div class="manija"></div>
<div class="ventana"></div>
</div>
</section>
<div class="arbol1">
<img src="./arbol.png" alt="">
</div>
<div class="arbol2">
<img src="./arbol.png" alt="">
</div>
<div class="manzana"></div>
</section>
</body>
</html>
Código CSS:
html {
font-size: 62.5%;
}
h1 {
font-size: 3.2rem;
}
p {
font-size: 2rem;
}
.dibujo {
width: 90vw;
height: 85vh;
background: rgb(162,232,129);
background: linear-gradient(50deg, rgba(162,232,129,1) 0%, rgba(104,207,144,1) 48%, rgba(61,255,0,1) 100%);
}
.cielo, .montanas {
position: relative;
}
.cielo {
width: 100%;
height: 60%;
background: rgb(244,242,242);
background: linear-gradient(50deg, rgba(244,242,242,1) 0%, rgba(104,192,207,1) 48%, rgba(0,212,255,1) 100%);
}
.cielo > *.sol, .nube_1, .nube_2 {
position: absolute;
}
.cielo > .sol {
width: 6%;
height: 20%;
right: 48%;
top: 30%;
background: rgb(255,154,0);
background: linear-gradient(50deg, rgba(255,154,0,1) 0%, rgba(254,234,3,1) 48%, rgba(254,255,0,1) 100%);
border-radius: 50%;
border: 0.2rem solid rgb(245, 202, 9);
}
.cielo > .nube_1 {
top: 10%;
left: 7%;
}
.cielo > .nube_2 {
right: 5%;
}
.montanas {
width: 100%;
height: 40%;
}
.montanas > * {
position: absolute;
bottom: 80%;
}
.montanas > .montana1 {
left: -15rem;
z-index: 2;
}
.montanas > .montana2 {
left: 20rem;
z-index: 1;
}
.montanas > .montana3 {
right: 20%;
z-index: 2;
}
.montanas > .montana4 {
right: 0;
z-index: 1;
}
.casa {
position: relative;
bottom: 40%;
height: 20rem;
z-index: 2;
}
.piso1, .techo {
position: relative;
left: 50%;
}
.casa > .techo {
height: 40%;
width: 12rem;
}
.casa > .techo > img {
width: 101%;
}
.casa > .piso1 {
height: 60%;
width: 12rem;
background-color: antiquewhite;
}
.puerta, .manija, .ventana {
position: absolute;
}
.casa > .piso1 > .puerta {
background-color: brown;
height: 50%;
width: 3.5rem;
bottom: 0;
left: 50%;
}
.casa > .piso1 > .manija {
background-color: gold;
border-radius: 50%;
width: 1.2rem;
height: 1.2rem;
right: 22%;
bottom: 20%;
}
.casa > .piso1 > .ventana {
background: rgb(178,235,229);
background: radial-gradient(circle, rgba(178,235,229,1) 0%, rgba(111,255,241,1) 48%, rgba(178,235,229,1) 100%);
border-radius: 50%;
width: 5rem;
height: 5rem;
left: 10%;
top: 7%;
}
.arbol1, .arbol2, .manzana {
position: absolute;
}
.arbol1, .arbol2 {
bottom: 14.8%;
z-index: 2;
}
.arbol1 {
left: 17%;
}
.arbol2 {
right: 9.65%;
}
.manzana {
width: 2rem;
height: 2rem;
background: rgb(255,13,13);
background: radial-gradient(circle, rgba(255,13,13,1) 0%, rgba(231,16,16,1) 48%, rgba(246,65,65,1) 100%);
border-radius: 50%;
bottom: 15%;
left: 25%;
z-index: 3;
}
Mi aporte de como coloque mis colores, mas mi codigo
<code>
<!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>Document</title>
<style>
div{
position: absolute;
border-radius: 50%;
}
.red{
width: 50px;
height: 50px;
background: red;
z-index: 1;
top:10%;
left:45%;
}
.blue{
width: 50px;
height: 50px;
background: blue;
top:30%;
left: 45%;
z-index: 2;
}
.gree{
width: 50px;
height: 50px;
background: green;
top:50%;
left:45%;
z-index: 3;
}
.purple{
width: 50px;
height: 50px;
background: purple;
top:70%;
left:45%;
z-index: 4;
}
</style>
</head>
<body>
<section>
<div class="red"></div>
<div class="blue"></div>
<div class="gree"></div>
<div class="purple"></div>
</section>
</body>
</html>
Si al nav de la clase de posicionamiento le das un valor de 1 o mayor
nav {
width: 100%;
height: 60px;
background: lightcyan;
position: fixed;
top:0;
z-index:1
}
este estará por encima de todos los otros elementos. Al ser position:fixed siempre aparecerá en la pantalla aunque hagas scroll.
El valor inicial del z-index suele ser auto (similar a 0).
Cuando regreso a la clase de posicionamiento y al Nav le coloco un z-index de valor 5, mientras al .container un valor de 4, el nav prevalece por encima del .container. Es excelente!
Muy buenos ejercicios, yo me base en el de las pelotas.
7:29 bokitaa
<!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>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<style>
body{
font-family: 'Bebas Neue', cursive;
font-size: 35px;
}
.div_1 {
background-color: aquamarine;
border-radius: 25px;
padding: 20px;
display: inline-block;
z-index: 0;
position: absolute;
top: 10px;
left: 10px;
text-align: center;
}
.div_2 {
background-color: rgb(246, 255, 127);
border-radius: 25px;
padding: 20px;
display: inline-block;
z-index: 2;
position: absolute;
top: 140px;
left: 140px;
text-align: center;
}
.div_3 {
background-color: rgb(127, 204, 255);
border-radius: 25px;
padding: 20px;
display: inline-block;
z-index: 1;
position: absolute;
top: 250px;
left: 250px;
text-align: center;
}
</style>
</head>
<body>
<div class="div_1">
<h3>Mensaje 1</h3>
<p>Este es el mensaje 1</p>
</div>
<div class="div_2">
<h3>Mensaje 2</h3>
<p>Este es el mensaje 2</p>
</div>
<div class="div_3">
<h3>Mensaje 3</h3>
<p>Este es el mensaje 3</p>
</div>
<div></div>
<div></div>
</body>
</html>[]([url]([url]([url]([url]([url]([url](url)))))))
Les comparto mi Tarjeta perfil:
Z-index:
La jerarquía se establece por números de menor a mayor. En caso de que exista un elemento padre o madre, los hijos respetarán la jerarquía del padre o la madre y no pasarán por encima de los mayores al elemento padre o madre, sin importar que tengan mayor valor.
Sí me ha sucedido. Hay pop-ups que incluso no dejan que interactúes con la página.
Entonces esto sería de alguna manera similar a como se trabaja en Photoshop en donde llegamos al resultado a través de capaz, si no estoy mal.
Me gusto el resultado!!! 😃
una recomendación seria que al poner el z-index elijan un número grande, así cuando se quieran agregar mas bloques no se tendría que cambiar mucho solo poner un número en el intermedio (explicación confusa).
rojo {
z-index: 3;
}
naranja {
z-index: 2;
}
amarillo {
z-index: 1;
}
si se le quiere agregar un color después del amarillo se tendría que cambiar la mayoría de números, en cambio
rojo {
z-index: 10;
}
naranja {
z-index: 5;
}
amarillo {
z-index: 1;
}
ahora solo seria agregar
azul {
z-index: 2;
}
En mi caso solucione lo del navbar poniendo un z índex alto solo en la nav bar aunque no creo que sea la mejor forma, ideas o sugerencias ?
Yo realice esta figura para aplicar lo de posicionamientos y el z index entre otros temas vistos en el curso
Así me quedo super:
ok, buen tema, el z-index, así me quedó:
gracias platzi, Dios los bendiga
Que hay? Les dejo mi código con base a lo que dijo la profesora, testeando el código anterior respecto al posicionamiento.
HTML
<body>
<nav class="nav"></nav>
<div class="superbox">
<div class="container">
<div class="item"></div>
</div>
<div class="container">
<div class="item2"></div>
</div>
<div class="container">
<div class="item3"></div>
</div>
<div class="container">
<div class="item4"></div>
</div>
</div>
<div class="space">
<div class="number2"></div>
<div class="number2"></div>
<div class="number2"></div>
<div class="number2"></div>
<div class="number2"></div>
<div class="number2"></div>
<div class="number2"></div>
<div class="number2"></div>
</div>
<br>
<ul class="list">
<p class="names1">Figures
<li class="fraction"></li>
<li class="fraction"></li>
<li class="fraction"></li>
<li class="fraction"></li>
<li class="fraction"></li>
</p>
</ul>
CSS
<style>
.superbox {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.container:nth-child(2n+1) {
height: 100px;
width: 100px;
background: tomato;
position: relative;
z-index: 7;
}
.container:nth-child(2n+2) {
height: 100px;
width: 100px;
background: tomato;
position: relative;
z-index: 3;
}
.item {
height: 30px;
width: 30px;
background: turquoise;
position: absolute;
bottom: 100;
right: 0;
z-index: 6;
}
.container .item2 {
height: 30px;
width: 30px;
background: turquoise;
position: absolute;
bottom: 100;
right: 100;
z-index: 6;
}
.container .item3 {
height: 30px;
width: 30px;
background: turquoise;
position: absolute;
bottom: 0;
right: 100;
z-index: 6;
}
.container .item4 {
height: 30px;
width: 30px;
background: turquoise;
position: absolute;
bottom: 0;
right: 0;
z-index: 6;
}
.nav {
height: 70px;
width: 100%;
background: yellowgreen;
position: fixed;
top: 20px;
z-index: 5;
}
.space {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.number2 {
height: 70px;
width: 70px;
background: darkcyan;
top: 200;
left: 200;
z-index: 6;
}
.number2:nth-child(2n+1) {
height: 70px;
width: 70px;
background: darkcyan;
top: 200;
left: 200;
z-index: 4;
}
.list {
position: sticky;
top: 0;
z-index: 7;
}
.list .fraction:nth-child(2n+1) {
height: 10px;
width: 10px;
background: purple;
position: inherit;
margin-left: 10px;
}
.list .fraction {
height: 10px;
width: 10px;
background: yellow;
position: inherit;
right: 0;
}
</style>
Si en las cookies!
<! DOCTYPE html >
< html lang = " en " >
< cabeza >
< meta charset = " UTF-8 " >
< meta http-equiv = " X-UA-Compatible " content = " IE = edge " >
< meta name = " viewport " content = " width = device-width, initial-scale = 1.0 " >
< título > Documento </ título >
< estilo >
div {
posición : absoluta;
fondo : palegoldenrod;
}
. uno {
índice z : 5 ;
}
. dos {
índice z : 4 ;
}
. rojo {
ancho : 20 px ;
altura : 20 px ;
fondo : rojo;
índice z : 5 ;
}
. azul {
ancho : 20 px ;
altura : 20 px ;
fondo : azul;
índice z : 4 ;
}
. amarillo {
ancho : 20 px ;
altura : 20 px ;
fondo : amarillo;
índice z : 6 ;
}
</ estilo >
</ cabeza >
< cuerpo >
<! - <div class = “one”> Maestro </div>
<div class = “dos”> Plazi </div> ->
< sección >
< div class = " red " > Rojo </ div >
< div class = " blue " > Azul
< div class = " yellow " > Amarillo </ div >
</ div >
</ sección >
</ cuerpo >
</ html >
<!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>Document</title>
<style>
div {
position: absolute;
background: palegoldenrod;
}
.one {
z-index: 5;
}
.two {
z-index: 4;
}
.red {
width: 100px;
height: 100px;
background: red;
z-index: 5;
top: 70px;
left: 70px;
}
.blue {
width: 100px;
height: 100px;
background: blue;
z-index: 4;
}
.yellow {
width: 100px;
height: 100px;
background: yellow;
z-index: 6;
top: 35px;
left: 35px;
}
</style>
</head>
<body>
<!-- <div class="one">Master</div>
<div class="two">Platzi</div> -->
<section>
<div class="red">Red</div>
<div class="blue">Blue
<div class="yellow">Yellow</div>
</div>
</section>
</body>
</html>
Pese a estar abajo de los container, el nav se sigue posicionando encima de este gracias al z-index
<!DOCTYPE html>
<html lang="es">
<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>Document</title>
<style>
.container {
width: 300px;
height: 300px;
background: papayawhip;
position: relative;
top: 20px;
z-index: 1;
}
.item {
background: rgb(187, 255, 0);
width: 30px;
height: 30px;
position: absolute;
right: 0;
z-index: 3;
}
nav {
width: 100%;
height: 70px;
background: lightcyan;
position: fixed;
top: 0;
z-index: 2;
}
p {
top:20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
<nav></nav>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, id velit autem repellat mollitia excepturi consequatur suscipit itaque alias doloremque dignissimos incidunt vel provident iste quia maxime reiciendis nihil. Quis quae enim quaerat totam, praesentium, pariatur magni, eligendi quasi officiis eveniet distinctio alias molestiae. Ipsam doloribus saepe nostrum! Eveniet, quasi? Ducimus adipisci ipsa eos amet quae nulla sunt accusantium porro debitis laboriosam earum quaerat totam, dolores error sint, quidem itaque repellat nihil fugit quo. Aperiam nobis repudiandae qui quas quo natus alias expedita repellat officiis! Modi delectus praesentium accusantium natus quo similique dolor fuga eius exercitationem magnam aperiam aut adipisci animi iure error, earum quod sapiente, aspernatur sed nisi obcaecati? Perspiciatis fugit odio repudiandae similique consectetur sapiente distinctio ab iure ea, nesciunt saepe quas tempore, voluptatem explicabo! Voluptate cupiditate tempora asperiores dolore est aut? Tenetur facere, saepe accusantium rerum magni asperiores provident, reiciendis quam possimus labore aperiam, quis consectetur natus hic ut nulla ea. Illum rem ut eos cumque id modi quos totam illo quas reprehenderit, unde, soluta autem nihil. Accusamus dolor illo nam maxime nemo ipsum perferendis doloribus, aut suscipit natus dolorum animi in nostrum assumenda sequi deserunt corporis culpa ipsa architecto doloremque incidunt qui eligendi. Eligendi possimus amet ab nostrum debitis atque repellat temporibus, officia maxime veritatis rerum fugit enim maiores sapiente assumenda voluptas. Dignissimos praesentium temporibus tempore necessitatibus excepturi saepe fuga ducimus numquam nulla dolorum debitis iste tempora quis suscipit ad, quidem, architecto facere a perferendis porro dolores ut quas alias laudantium. Porro aut ab eum velit placeat ipsum suscipit! Ullam, minus voluptatibus, ipsum in voluptates est quasi cum tenetur eligendi perspiciatis enim sunt sequi! Nihil necessitatibus quas facere quaerat minus, similique magnam. Nesciunt ad magnam quia iure, soluta repellendus architecto molestiae voluptatum corporis sit recusandae suscipit quod aliquid, voluptatibus voluptatem maiores nisi aut eum laborum ipsam voluptas officia atque ullam! Praesentium tenetur autem laudantium quod pariatur, ullam doloremque architecto repellendus expedita, ipsum iste reprehenderit velit. Similique magnam, aspernatur eius qui quasi quidem ea quas, quaerat praesentium at dolore dolorum non. Asperiores recusandae nostrum id vel modi ipsam est obcaecati neque architecto sunt quia, fugit rerum iure impedit officiis. Nihil cumque aliquam incidunt minus sequi, delectus numquam consectetur, illo provident repellendus repudiandae atque expedita nobis rem officia unde iure soluta sit porro, architecto facilis laboriosam? Laudantium quisquam illum magni asperiores nulla quos possimus, incidunt odio fuga id. Animi dignissimos voluptas ipsa sint non officiis repellat dolor ullam, delectus sequi aliquam, corporis architecto facilis facere hic libero amet repellendus veniam eveniet! Et est architecto ut itaque voluptates cupiditate a sequi quas sunt officia voluptas nobis iste obcaecati, saepe quo aut! Perferendis illo qui accusamus iusto vel provident quaerat officia aspernatur nulla quibusdam. Doloremque excepturi magni recusandae eligendi et eaque at repellat quis dignissimos facilis quos vel voluptas laborum numquam odio exercitationem placeat, labore eum laboriosam delectus aliquam quibusdam! Obcaecati perspiciatis sapiente rem sint dolore tempore, exercitationem laboriosam quod eius! Accusamus ad vitae officiis ipsam impedit sit? Laboriosam odio dignissimos eaque non nemo assumenda sunt, necessitatibus facere blanditiis eligendi eius ab, quae quod culpa, placeat quam quia esse explicabo laborum officiis omnis cumque voluptatibus aliquam. Maiores et accusantium earum exercitationem animi. Laboriosam molestias repudiandae dolorum saepe nisi itaque, facere quas dolore ducimus autem magni quidem quae sapiente iusto perferendis, fuga rem error quaerat? Ducimus nihil vero eius. Itaque natus tenetur ea cumque minus magni hic dicta quidem perspiciatis eligendi adipisci tempora distinctio ad quibusdam, nam rem pariatur saepe sit maiores! Vel temporibus alias ipsum quae fugiat omnis, laboriosam totam voluptate voluptatum necessitatibus beatae placeat magni assumenda nihil autem non mollitia consequatur incidunt maiores explicabo! Officiis magnam eveniet laboriosam voluptates dolor ex sequi asperiores sit voluptate, tenetur cum architecto voluptas modi maiores, consequuntur, nostrum error nemo. Incidunt neque nam, eaque voluptatibus veritatis enim distinctio quae dolores soluta. Molestiae officia dolor voluptate accusantium. Blanditiis, voluptatem alias quidem unde quis officiis ut repudiandae nihil voluptatum, minus saepe, distinctio qui ipsum? Distinctio qui quisquam iure reprehenderit saepe consectetur ipsam culpa hic maxime repudiandae illum voluptate quos repellat, eos esse fuga labore! Voluptates exercitationem reprehenderit, ipsam rem praesentium quidem cumque dolores quaerat, aut eaque reiciendis fuga animi ducimus facilis eligendi ab, adipisci officia? Doloribus blanditiis exercitationem ea nemo maiores, earum temporibus provident quisquam quis minima incidunt recusandae, doloremque laborum neque maxime eum a mollitia! Amet eos dignissimos, autem dolore dolores facere commodi? Nemo, illo corporis ipsum adipisci exercitationem ut eos asperiores expedita, culpa soluta, est eveniet numquam? Modi eveniet, voluptatibus blanditiis hic commodi dicta reiciendis id possimus, cum adipisci distinctio dolores. Quo voluptatibus illum ut, nobis velit nihil impedit fuga alias perferendis mollitia voluptas corrupti ab cumque sint amet incidunt eius, deserunt quidem debitis itaque illo minima optio aut magnam. Fugiat ab iusto error! Asperiores ratione reiciendis in soluta, quae ullam facere totam modi magnam nam esse quos, voluptatibus, laborum dolorum voluptatem obcaecati unde aliquam. Excepturi dolore quaerat asperiores quasi voluptates id in, alias minima atque debitis impedit placeat totam adipisci, reiciendis sit at soluta cumque voluptatibus? Architecto, qui? Quae rem nobis nesciunt tempora, ea non dignissimos alias tenetur recusandae impedit velit excepturi deleniti cumque. Molestias labore ad illum placeat suscipit id dignissimos, ex eius omnis culpa minima eum ut inventore consequatur reprehenderit, accusamus aspernatur voluptatum. At, in nihil dolorem ut corrupti, ad a molestiae, cum doloremque deserunt ipsam asperiores explicabo ducimus reiciendis commodi illo? Odio ad quae nemo ipsa velit magni quas. Facere pariatur eligendi sint officia deleniti perferendis quae sed hic sunt enim? Optio ipsam, voluptatem, reprehenderit, debitis et in sint nam nobis ea maiores dolore! Assumenda eveniet minima recusandae ad illo dolorem provident corrupti, similique voluptatum dolore? Officia ad iure minima, voluptatem perspiciatis fuga veritatis. Fugit distinctio velit repudiandae nostrum alias aspernatur voluptas voluptates optio id? Non asperiores doloremque sint consectetur natus est labore nulla et praesentium deleniti, rem voluptates aspernatur quibusdam repellat. Repellat reprehenderit libero, saepe iure vitae eius minima! Dolor veritatis sed deleniti quis, iste natus odio, expedita quidem nisi ut eaque sunt a dolore fugiat. Culpa temporibus facere molestiae hic molestias illum ex placeat, vero maxime mollitia quidem, assumenda quibusdam asperiores cumque quasi consectetur nulla delectus. Cupiditate, quisquam, sunt tempore fuga, doloribus assumenda voluptatem sequi aut molestias accusamus ullam inventore? Nobis tempore a consequatur fugit molestiae adipisci necessitatibus, maiores iure nostrum numquam ducimus dolore minus facere. Laudantium magni facilis nesciunt doloremque quo ipsa, deleniti ea quisquam! Magni distinctio facilis adipisci odit amet, dolor quisquam vel iste dolorum voluptatibus ipsa aperiam quidem at laudantium atque eveniet commodi assumenda! Pariatur repellat suscipit non, velit quae possimus tempora nisi sunt, quibusdam repellendus quia, minima soluta recusandae cumque et ipsa corporis perspiciatis aperiam officiis tempore labore voluptates odio nesciunt. Dolor mollitia accusantium quasi reiciendis quod autem laudantium pariatur vitae. Consequatur, laborum quos fugiat nostrum repellendus voluptates quod! Consequuntur obcaecati beatae repudiandae modi, totam error laborum dicta. Maxime quisquam consectetur ducimus similique ad officia sit, vel iusto repellendus. Quo mollitia quia dicta similique architecto soluta, placeat provident assumenda obcaecati, minus ipsa molestiae labore quod qui cum velit eius culpa laboriosam excepturi dignissimos nobis deserunt aliquam deleniti exercitationem. Deleniti vero, ducimus tempore tenetur voluptatem dolores laudantium officia illo facilis accusamus officiis soluta omnis est alias aliquam. Vel ex laudantium cupiditate, deserunt, minus odio vero optio rem quas ducimus non impedit dolorum eveniet ipsa? Doloribus.</p>
</body>
</html>
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.