[CSS]如何使用指定重叠订单的z索引!不起作用的方法和预防措施

如果你问“z-indep属性”,可能会有麻烦和脸部? “我知道它是一个决定元素顺序的财产。但我并不渴望考虑它。”

CSS的“Z-Index”是该习惯的强大财产。即使简单的设置不再是问题,一旦它已成为一个复杂的设置,它就不会正常。如果您是使用该位置属性的人,您需要更频繁地使用“Z-Index属性”,但您需要了解原因。在这里,让我们研究原因。如果您完成读取,您可以了解如何使用z索引。

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

css的“z-indep属性”是什么?

例如,使用位置属性,它是CSS属性,该属性指定元素重叠时该元素的顺序。

可以在数字中指定的值是以下两个。

描述
汽车 这是一个不使元素重叠的值。它仅按照父元素置于与级别相同。
整数值 可以在最小值设置“-2147483647”到“最大值:2147483647”的整数。您无法设置小数点。

Z索引属性的基本用法

所以,让我们使用z索引检查行为。将以下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-index属性”是,如果元素以这种方式重叠,则可以通过指定重叠顺序来执行更改显示的效果。例如,假设您要将“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-index的罠罠:我不工作虽然指定了

像上面的设置一样,它不是一个简单的案例。有些人可能有一个经验,“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属性”为“z-index-3中的1” “它应该上面的元素。为什么这样的事情发生了?

这是因为很难使用“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索引属性。连合在一起,它往往以以下顺序重叠。

它是强烈意识到这种层次结构的“z-indem属性”的一个特征。换句话说,“z-index属性”是有效的顺序是“在相同层次结构中的顺序”,集合“z-indep属性”的值(数值)受到其不存在的层次结构之外事情。

也就是说,如果以下HTML语句是下面的,则“z-index-1”和“z-index-2”和“z-index-3”的顺序可以使用“z-index的值来更改顺序属性“但是,”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属性”,即使在同一层次结构中也会按顺序更改。基本上,让我们记住,因为它按以下顺序排列。

测试问题

然后,它是“Z-indem属性”的测试。如果指定了以下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;
}

选择

以下顺序从上到下。
1A元素→B元素→C元素→D元素→E元素→F元素
2D元素→F元素→E元素→B元素→元素→C元素
3B元素→元素→D元素→F元素→E元素→C元素
4D元素→元素→B元素→F元素→C元素→E元素
5A元素→B元素→F元素→D元素→E元素→C元素

回答

当然,答案是3。显示以下显示。首先,确定元素,B元素和C元素的顺序。接下来,作为C元素,确定D元素,e元素和f元素的顺序。我认为价值的大小是多大或者,但已经发现它也不会影响层次结构,即使它是一个较小的。

概括

作为摘要,我写信给你要记住的东西。

  • “z-index”是一个属性,指定元素重叠的顺序。
  • 该值的大小确定顺序。
  • “z-index”是通常与“位置属性”一起使用的属性。
  • 由于分层结构强烈意识,因此无法在相同层次结构中指定排名来指定“Z-index属性”。

给这篇文章的人

田中 陽介

越南的企业家和人力资源相关咨询。七年已经过去了日本,但我享受了一个不能在日本完成的驼峰。最近我在铁路上用Ruby制作网络服务。