[CSS]如何使用z-index指定堆叠顺序!无效时应采取的措施和注意事项

当您听到“ z-index属性”时,某些人可能会感到烦恼和皱眉。您是否曾经感到过“我知道这是一个确定元素顺序的属性,但可能不是您想要的顺序”?

CSS“ z-index”是一个古怪的属性。即使简单的设置很好,但一旦变成复杂的设置,它就不会表现出预期的效果。如果使用position属性,通常会使用“ z-index属性”,但是您需要了解基本原理。让我们在这里学习理论。阅读后,您应该知道如何使用“ z-index”。

[对于初学者]仔细解释如何编写CSS(样式表)

什么是CSS“ z-index属性”?

例如,一个CSS属性使用“ position属性”来指定元素重叠时的顺序。

可以为数值指定以下两个值。

描述
汽车 这是一个不会创建元素重叠的值。它仅与父元素放置在同一级别。
整数值 只能将从“ -2147483647”到“最大值:2147483647”的整数设置为最小值。您无法设置小数点。

z-index属性的基本用法

现在,让我们使用z-index检查行为。将以下html设置为示例。

<div class="sample">
 <div class="z-index-1">
    これは、z-index-1要素です。
 </div>
 <div class="z-index-2">
    これは、z-index-2要素です。
 </div>
</div>

接下来,设置以下CSS。

.sample{
    position: relative;
}

.z-index-1{
    position: absolute;
    top: 30px;
    left: 30px;
    background-color: red;
    width: 100px;
    height: 100px;
}

.z-index-2{
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: blue;
    width: 100px;
    height: 100px;
}

由于设置了“位置属性”,因此“ z-index-1”和“ z-index-2”与“样本元素”分开,并显示如下。您可以看到“ z-index-1”元素位于顶部。

通过指定元素以这种方式重叠时的重叠顺序,“ z索引属性”可以具有更改显示的效果。例如,假设您希望将“ z-index-2”元素置于前台。在这种情况下,请尝试将“ z-index-2”设置为“ z-index:2;”。

.sample{
    position: relative;
}

.z-index-1{
    position: absolute;
    top: 30px;
    left: 30px;
    background-color: red;
    width: 100px;
    height: 100px;
}

.z-index-2{
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: blue;
    width: 100px;
    height: 100px;
    z-index: 2;
}

然后,元素的顺序改变。下面,“ z-index-2”元素位于前景中。

您可以看到“ z-index”的效果。这样,您可以控制元素的重叠。

始终掉落的Z索引陷阱:即使您指定了Z索引陷阱也不起作用

不仅仅是上述设置的简单案例。某些人可能会遇到“ z-index”排序不起作用的情况。例如,如果您编写以下内容,该规范将不会立即生效。准备“ z-index-3”元素,并将“ z-index-3-1”作为子元素放置在其中。

<div class="sample">
    <div class="z-index-1">
      これは、z-index-1要素です。
    </div>
    <div class="z-index-2">
      これは、z-index-2要素です。
    </div>
    <div class="z-index-3">
      これは、z-index-3要素です。
      <div class="z-index-3-1">
        これは、z-index-3-1要素です。
      </div>
    </div>
  </div>

设置CSS的方法与上次相同,如下所示。

.sample{
    position: relative;
}

.z-index-1{
    position: absolute;
    top: 30px;
    left: 30px;
    background-color: red;
    width: 100px;
    height: 100px;
}

.z-index-2{
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: blue;
    width: 100px;
    height: 100px;
}

.z-index-3{
    position: absolute;
    top: 80px;
    left: 80px;
    background-color: yellow;
    width: 100px;
    height: 100px;
}

.z-index-3-1{
    background-color: green;
    width: 100px;
    height: 100px;
}

结果,未指定“ z-index属性”时的显示如下。您可以看到元素从顶部开始按顺序堆叠。

接下来,更改“ z-index属性”的顺序,以便在CSS中颠倒该顺序,并遵循“ z-index属性”指定的顺序。

.sample{
    position: relative;
}

.z-index-1{
    position: absolute;
    top: 30px;
    left: 30px;
    background-color: red;
    width: 100px;
    height: 100px;
    z-index: 3;
}

.z-index-2{
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: blue;
    width: 100px;
    height: 100px;
    z-index: 2;
}

.z-index-3{
    position: absolute;
    top: 80px;
    left: 80px;
    background-color: yellow;
    width: 100px;
    height: 100px;
    z-index: 1;
}

.z-index-3-1{
    background-color: green;
    width: 100px;
    height: 100px;
    z-index: 0;
}

您会看到结果与预期不符。 “ z-index-3-1”元素应位于底部,而父元素“ z-index-3”应位于底部。 “ z-index-3-1”元素的“ z-index属性”为“ 0”,“ z-index-3”元素的“ z-index属性”为“ 1”,“ z-index-3”元素本来应该。为什么会这样呢?

这就是使“ z-index属性”难以使用的原因。理解关键字“堆栈上下文”对于理解该理论至关重要。实际上,通过理解并牢记此“堆栈上下文”,可以在几秒钟内解决“ z-index属性”的困难。

了解堆栈上下文。

堆栈上下文是所谓的“层次结构”。例如,在以下html文件中,在底部有一个html语句。最重要的是,有一个“样本”元素(父元素),最重要的是有子元素“ z-index-1”和“ z-index-2”。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>サンプル-position</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
 <div class="sample">
    <div class="z-index-1">
      これは、z-index-1要素です。
    </div>
    <div class="z-index-2">
      これは、z-index-2要素です。
    </div>
 </div>
</body>
</html>

在图片中,其外观如下所示。

即使您未指定“ z-index属性”,元素也会堆叠在一起。总而言之,它们倾向于按以下顺序从底部到底部重叠。

“ z索引属性”的特征是强烈意识到这种层次结构。换句话说,“ z-index属性”有效的顺序是“同一层次结构中的顺序”,“ z-index属性”的设置值(数值)的影响超出层次结构。不影响。

换句话说,在以下html语句中,可以通过“ z-index属性”的值来更改“ z-index-1”,“ z-index-2”和“ z-index-3”的顺序。但是,它不影响“ z-index-3-1”的顺序。由于“ z-index-3-1”是“ z-index-3”的子元素,因此“ z-index属性”的值基于其父元素的顺序。如果创建新的“ z-index-3-2”并在此处设置“ z-index属性”,则将反映“ z-index-3”元素内的顺序。现在您知道``z-index属性''中值的顺序不是所有层次结构中的顺序。

接下来,如果指定“ z-index属性”,则即使在相同的层次结构中,更改也会按顺序发生。基本上,它们按以下顺序排列,因此请记住。

测试题

现在,让我们测试“ z-index属性”。如果指定了以下html语句和CSS,则元素的堆叠顺序是什么?

<div class="sample">
    <div class="z-index-1">
      A要素
    </div>
    <div class="z-index-2">
      B要素
    </div>
    <div class="z-index-3">
      C要素
      <div class="z-index-3-1">
        D要素
      </div>
      <div class="z-index-3-2">
        E要素
      </div>
      <div class="z-index-3-3">
        F要素
      </div>
    </div>
  </div>
.sample{
    position: relative;
}

.z-index-1{
    position: absolute;
    top: 30px;
    left: 30px;
    background-color: red;
    width: 100px;
    height: 100px;
    z-index: 3;
}

.z-index-2{
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: blue;
    width: 100px;
    height: 100px;
    z-index: 5;
}

.z-index-3{
    position: absolute;
    top: 80px;
    left: 80px;
    background-color: yellow;
    width: 100px;
    height: 100px;
    z-index: 1;
}

.z-index-3-1{
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: green;
    width: 100px;
    height: 100px;
    z-index: 100;
}

.z-index-3-2{
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: black;
    width: 20px;
    height: 20px;
    width: 100px;
    height: 100px;
    z-index: 10;
}

.z-index-3-3{
    position: absolute;
    top: 40px;
    left: 40px;
    background-color: orange;
    width: 20px;
    height: 20px;
    width: 100px;
    height: 100px;
    z-index: 50;
}

选择项

从上到下的顺序如下。
①A元素→B元素→C元素→D元素→E元素→F元素
②D元素→F元素→E元素→B元素→A元素→C元素
③B元素→A元素→D元素→F元素→E元素→C元素
④D元素→A元素→B元素→F元素→C元素→E元素
⑤A元素→B元素→F元素→D元素→E元素→C元素

回答

当然,答案是③。显示如下。首先,确定A元素,B元素和C元素的顺序。接下来,基于C元素确定D元素,E元素和F元素的顺序。您可以再次看到,无论值大小,跳过层次结构都不会影响它。

概要

总之,写下您想记住的内容。

  • “ Z-index”是指定元素堆叠顺序的属性。
  • 值的大小确定顺序。
  • “ Z索引”是一种经常与“位置属性”结合使用的属性。
  • 由于“ z-index属性”非常了解层次结构,因此即使可以在同一层次结构中指定排名,也不能在该层次结构之外指定排名。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。