Logo

菜单

发布于 2026-01-06 0 阅读
0

CSS 的完整和实践：z 索引 y 堆叠上下文

CSS 的完整和实践：z 索引 y 堆叠上下文

¡Hola gente bonita!👋

这是 CSS 位置的最后一个说明，可以解释属性z-index。此属性不允许定义元素位置的位置。

🧐 ¿Cómo z-index 功能？

正常情况下，其他元素是正常的，但其他元素除外。 La propiedad z-indexespecica el orden de apilamiento (Stacking Context) en el eje z, es decir, cual elemento debe ser colocado enfrente o detrás de otros.

La propiedad z-indexacepta un valor numérico que puede ser un número positivo or negativo, no se us unidades tales como Pixeles or porcentajes. Esta propiedad toma un valor numérico entre 0 y ±2147483647 en la mayoría de los navegadores comunes。

叛逃者的勇气z-index。auto在 HTML 文档中查找元素的顺序，在 HTML 文档中查找元素的基本信息，并在 apilando encima 中查找元素的基本信息，然后使用z-index修改后的属性，即可对这些元素进行比较：

示例 1️⃣

在 3 次比赛中，您将无法进行任何姿势和动作z-index，也不能单独进行动作margin-top。



<div class="demo">
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-3">3</div>
</div>
Enter fullscreen mode Exit fullscreen mode 


.demo {
    width: 300px;
    height: 300px;
    padding: 2rem;
    border: 2px dashed black;
}

[class^="box-"] {
    width: 100px;
    height: 100px;
    padding: 30px 10px;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

.demo > * + * {
    margin-top: -50px; ⬅️
    opacity: 0.8;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 60%);
}

.box-1 {
    background-color: pink;
    border: 2px solid hotpink;
}

.box-2 {
    background-color: tomato;
    border: 2px solid orangered;
}

.box-3 {
    background-color: wheat;
    border: 2px solid gold;
}
Enter fullscreen mode Exit fullscreen mode

替代文字
记录一个 ninguna caja se le ha especado la propiedad z-index y tampoco están posicionadas, podemos ver en la imagen que las cajas se han apilado, entonces ¿Cómo 决定 el navegador cual colocar encima del otro？请回答以下问题：如果没有 z 索引，则在美国订单中进行导航，在 HTML 文档中进行操作。 El que apare despuées siempre va “encima” de los otros elementsos.

如果修改了 HTML 代码，则首先将卡哈的编号与该卡哈的编号进行比较，最后将卡哈的最后一个卡哈改为所有的卡哈。

恢复 caja amarilla 的颜色和 caja roja 的颜色，然后在 HTML 文档中显示 caja 的颜色，然后使用 z-index 属性进行设置。

示例 2️⃣

说明属性 z 索引功能的前提，是与 dos cajas 单独操作的一个例子，即 a la primecaja la posicionamos con el valor de relativey la movemos con la propiedad top: 50px，esta caja se coloca encima de la caja dos y esto esto es porque en el documento HTML la caja uno esta primero。



.demo > * + * {
    /* eliminamos el margin-top */
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 60%);
}

.box-1 {
    position: relative; ⬅️
    top: 50px; ⬅️
    background-color: pink;
    border: 2px solid hotpink;
}

.box-2 {
    background-color: tomato;
    border: 2px solid orangered;
}
Enter fullscreen mode Exit fullscreen mode

替代文字
Como puedes ver la segunda caja no esta posicionada por lo tanto la caja uno se coloca encima。但是，¿Qué pasaría si a la caja dos también le agregamos el posicionamiento relative?, vamos a explicarlo con el siguiente ejemplo:



.box-1 {
    position: relative; ⬅️
    top: 50px; ⬅️
    background-color: pink;
    border: 2px solid hotpink;
}

.box-2 {
    position: relative; ⬅️
    background-color: tomato;
    border: 2px solid orangered;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

A la segunda caja alone se le agregó el valor relativey se coloco encima de la primera caja, ¿Por qué sucede esto?对此，您可以使用 z 索引声明中的元素来确定 HTML 文档中的顺序和顺序。

正常情况下，z 索引元素没有特殊说明。

示例 3️⃣

继续前面的操作，然后再按一下三个按钮，然后选择位置，然后position再选择属性选择器的属性。

⚠️ Recuerda que si estableces un valor especialo para z-index en un elemento y si no esta functionando es porque necesitas establecer un tipo de posicionamiento differenterente de static.这是 z-index 上的错误。

🔎 禁止使用 Flexbox 或网格，如果不能修改网格元素的 z 索引position: relative。



[class^="box-"] {
    position: relative; ⬅️
}
.box-1 {
    top: 50px;  ⬅️
    left: 50px; ⬅️
    background-color: pink;
    border: 2px solid hotpink;
}

.box-2 {
    top: 10px;   ⬅️
    left: 100px; ⬅️
    background-color: tomato;
    border: 2px solid orangered;
}

.box-3 {
    left: 150px; ⬅️
    top: -50px;  ⬅️
    background-color: wheat;
    border: 2px solid gold;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

La propiedad z-index puede cambiar este orden, si asignamos solamente a la caja dos un z-indexcon valor 1 la caja dos se coloca encima de las demás.



.box-2 {
    top: 10px;
    left: 100px;
    z-index: 1; ⬅️
    background-color: tomato;
    border: 2px solid orangered;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

但是，Qué pasa si a la caja tres también le coloco un z-index con valor 1？ la respuesta es que vamos a volver al Mismo estado que teníamos anteriormente:



.box-2 {
    z-index: 1; ⬅️
}

.box-3 {
    z-index: 1; ⬅️
}
Enter fullscreen mode Exit fullscreen mode

替代文字

记录第一张卡哈没有任何关于 z 索引的勇气的声明，但如果您发现卡哈的卡达 le vamos 是一种不同的勇气。

示例 4️⃣

例如，在 z 索引中连续使用 las cajas uno 和 tres estarán encima de la caja numero dos、las tres cajas titenen valores en z-index、es decir la primecaja tiene un valor de 3、 la segunda caja tiene un valor de 1y la tercer caja tiene un valor de 2。



.box-1 {
    z-index: 3; ⬅️
}

.box-2 {
    z-index: 1; ⬅️
}

.box-3 {
    z-index: 2; ⬅️
}
Enter fullscreen mode Exit fullscreen mode

替代文字

🧠 Recuerda que si el elemento tiene un valor Mayor en z-index se colocara encima de los otros elementos que tengan un valor menor.

➖ z-index 负值

除了其他元素之外，在 z-index 上也有一些负面的勇气，在某些特殊情况下，你可能会遇到一些问题，所以你可能会成为一个有兴趣的响应者。

🤔 ¿Por que no es recomendado usar valores consecutivos en la propiedad z-Index?

Siguiendo con el ejemplo anterior de la imagen, ahora te propongo un reto. ¿Qué pasaría si ahora quiero que la caja dos este encima de la caja tres, pero que est debajo de la caja uno?

您的解决方案是在 caja dos 上进行 valor 高级操作，以消除 caja 中的前 valor 问题：z-index : 1y ahora reemplazarlo por un valor Mayor, digamos que colocas: z-index: 3ahora la caja dos se coloca encima de la caja tres y es Correcto pero recuerda que también hay que colocar la caja dos debajo de la caja uno, pero ese valor que colocaste en la caja dos ya lo tiene la caja uno, entonces tienes que estar cambiando los valores.
Entonces después de estar comprobando，La que quizás llegaste fue esta 的可能解决方案：



.box-1 {  
    z-index: 3;
}

.box-2 {   
    z-index: 2;  
}

.box-3 {   
    z-index: 1;
}
Enter fullscreen mode Exit fullscreen mode

如果您没有最佳的操作方式，则可以连续获得多个值：1,2,3 en las cajas, y al momento de querer cambiar el orden de las cajas vas a tener que cambiar los valores y si quieres agregar una caja extra que también tenga un z-index declarado se puede volver complicado.

各种主要实践元素包括一系列数字放大，系列：10, 20, 30 至 darle espacio 和新元素，包括 z-index 和 cada uno de ellos。

En este ejemplo de valores a cada una de las cajas, si hay otro elemento extra que quiera incluir, por ejemplo una cuarta caja y si agrego un z-index puedo colocar el valor de 11ya que ese valor no estará ocupado por ningún otro elemento,这就是 una buena practica hacerlo de esta manera 的原因。



.box-1 {  
    z-index: 20;
}

.box-2 {   
    z-index: 15;  
}

.box-3 {   
    z-index: 10;
}
Enter fullscreen mode Exit fullscreen mode

El resultado es el siguiente:

替代文字

👨‍👦 与帕德雷希霍的关系

这是一个很重要的事情，一个重要的事情，一个重要的事情，一个重要的事情，一个决定，一个与父亲的关系。

示例 5️⃣



<div class="container">
  <div class="item"></div>
 </div>
Enter fullscreen mode Exit fullscreen mode 


.container {
    position: relative;
    width: 200px;
    height: 200px;
    padding: 2rem;
    background-color: lightblue;
}

.item {
    position: relative;
    top: -70px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: tomato;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

Ahora queremos que el contenedor padre（浅蓝色）se coloque encima del attendor hijo（番茄色），是一个简单的组合，但没有任何功能。 ¡Pongámoslo a prueba！



.container {
    position: relative;
    z-index: 20;
}
.item {
    position: relative;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

Como puedes 观察没有 pasado nada, el contenedor no se coloco encima del elemento hijo, quizás tu segunda solución sea colocar en el elemento hijo un Valor negativo talvez un -30 y si puede que esto funcione. ¡Pongámoslo a prueba！



.container {
    position: relative;
    z-index: 20;
}
.item {
    position: relative;
    z-index: -30;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

Como puedes observar tampoco ha funcionado, no se ha comportado de la manera que quieres, ¡包括 si estableces z-index a 999999！ o agregas la declaración !important， pero ¿ Por que sucede ？这是一个关于 z-index 声明的冲突，si no lo tuviera, si funcionaria。 Vamos a comprobarlo：



.container {
    /* Eliminamos el z-index */
    position: relative;
}
.item {
    position: relative;
    z-index: -30;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

Entonces decir que si el elemento padre tiene un z-indexdeclarado, el elemento hijo no se podrá colocar encima de el, a menos que el contenedor padre no tenga la propiedad z-indexy el elemento hijo lo tenga con valor negativo

:: 伪元素

我们将使用伪元素::before。该组合与前面的示例类似，但可以使用::after它来进行操作。



 <div class="box"></div>
Enter fullscreen mode Exit fullscreen mode 


.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: tomato;
}

.box::before {
    content: "";
    width: 150px;
    height: 150px;
    position: absolute;
    top: 130px;
    left: 130px;
    background-color: rebeccapurple;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

这是重要的理解伪元素的方式，它是生成元素的重要组成部分。
如果伪元素::before是由 caja 造成的，box那么它是通过 z 索引声明的伪元素，并且它是非 z 索引声明的原始元素。这是与神父的关系的前缘。

接收伪元素::before和::after绝对位置时，会自动将元素与原始元素关联起来。



.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: tomato;
}

.box::before {
   z-index: -100;
}
Enter fullscreen mode Exit fullscreen mode

替代文字

📋 结论

☑️z-index允许修改 las capas 的顺序。
☑️ 在 z 索引中没有任何特殊情况，无法正常使用。
☑️ 使用这些元素的z-index基本属性。
☑️z-index承认数值正/负值在 0 y ±2147483647 范围内。
☑️ 推荐使用连续值：1,2,3,4,5...，请考虑在实际中单独使用 numéricos amplios 的属性 z 索引值。
☑️ En algunos casos puede que no sea necesario el uso de z-index。
☑️ 如果你的元素是一个z-index声明，元素元素是不存在的，那么你的元素元素是没有属性的，z-index元素元素是负面的，这就是伪元素的问题。
☑️ 使用 Flexbox 或 Grid，可以修改 Flex 元素或网格的 z 索引position: relative。

🔎资源：

感谢您🦸🏻‍♀️
社交方面的注意事项：

▶️YouTube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵TikTok

文章来源：https://dev.to/lupitacode/guia-completa-y-practica-sobre-posicionamiento-css-z-index-y-stacking-context-57ig
DEV 正在庆祝骄傲月！
通过示例学习面向切面编程：什么是切...