El orden de apilamiento describe el orden en que se colocan los elementos HTML. De forma predeterminada, los elementos HTML se colocan en el siguiente orden:
- Elemento raíz (<html>)
- Elementos no posicionados en el orden en que están definidos (elementos sin posición descrita, es decir, estáticos)
- Elementos posicionados en el orden en que están definidos (elementos con una posición distinta a la estática)
Tratemos de entender cómo funciona el orden de apilamiento predeterminado:
Ejemplo 1: orden de apilamiento predeterminado
A continuación se muestra el código HTML y CSS para comprender el orden de apilamiento predeterminado:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Default stacking order</title>
<style>
.box {
box-sizing: border-box;
font-family: Arial;
color: #eee;
width: 125px;
height: 125px;
text-align: center;
}
.blue,
.green {
position: absolute;
}
.red {
background: red;
}
.green {
background: green;
top: 40px;
left: 40px;
}
.blue {
background: blue;
top: 80px;
left: 80px;
}
</style>
</head>
<body>
<div class="box green">Positioned</div>
<div class="box blue">Positioned</div>
<div class="box red">Non-positioned</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html>
<head>
<title>Stacking with z-index</title>
<style>
.box {
box-sizing: border-box;
font-family: Arial;
color: #eee;
width: 125px;
height: 125px;
text-align: center;
}
.blue,
.green {
position: absolute;
}
.red {
background: red;
z-index: 100;
/*No effect since red is non-positioned*/
}
.green {
background: green;
top: 40px;
left: 40px;
z-index: 3;
}
.blue {
background: blue;
top: 80px;
left: 80px;
z-index: 2;
}
</style>
</head>
<body>
<div class="box green">Positioned</div>
<div class="box blue">Positioned</div>
<div class="box red">Non-positioned</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html>
<head>
<title>Stacking context</title>
<style>
.box {
box-sizing: border-box;
font-family: Arial;
color: #eee;
width: 125px;
height: 125px;
text-align: center;
}
.blue,
.green,
.orange,
.purple {
position: absolute;
}
.red {
background: red;
z-index: 100;
}
.green {
background: green;
top: 60px;
left: 50px;
z-index: 1;
}
.orange {
width: 85px;
height: 85px;
left: 20px;
background-color: orange;
font-family: Arial;
z-index: 3;
}
.purple {
background-color: purple;
top: 30px;
left: 30px;
z-index: 0;
}
.blue {
background: blue;
top: 100px;
left: 100px;
z-index: 2;
}
</style>
</head>
<body>
<div class="box green">Positioned
<div class="orange">Positioned</div>
</div>
<div class="box purple">Positioned</div>
<div class="box blue">Positioned</div>
<div class="box red">Non-positioned</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html>
<head>
<title>Modified stacking context</title>
<style>
.box {
box-sizing: border-box;
font-family: Arial;
color: #eee;
width: 125px;
height: 125px;
text-align: center;
}
.blue,
.green,
.orange,
.purple {
position: absolute;
}
.red {
background: red;
z-index: 100;
}
.green {
background: green;
top: 60px;
left: 50px;
z-index: 1;
}
.orange {
width: 85px;
height: 85px;
top: 40px;
left: 25px;
background-color: orange;
font-family: Arial;
z-index: 3;
}
.purple {
background-color: purple;
top: 30px;
left: 30px;
z-index: 0;
}
.blue {
background: blue;
width: 85px;
height: 85px;
top: 25px;
left: 10px;
z-index: 2;
}
</style>
</head>
<body>
<div class="box green">Positioned
<div class="orange">Positioned</div>
<div class="blue">Positioned</div>
</div>
<div class="box purple">Positioned</div>
<div class="box red">Non-positioned</div>
</body>
</html>
¿Escribir código en un comentario? Utilice ide.geeksforgeeks.org , genere un enlace y compártalo aquí.
Publicación traducida automáticamente
Artículo escrito por adhetyanarayan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA