CSS Z-Index不起作用?如何使用堆栈顺序修复它

2020年12月30日10:40:48 发表评论 34 次浏览

本文概述

的索引CSS的属性是一个棘手的问题。如果你不知道如何正确使用它, 它本身将无法轻松工作。

所以在这篇文章中, 我将解释索引属性是什么, 堆叠顺序是什么, 以及如何正确使用它们。

我还将给出一些常见示例, 说明为什么索引属性可能无法正常工作, 并且还会向你显示解决方案。

什么是Z索引?

首先, 字符Z来自三个维度x, y和z的表示。 x和y代表宽度和高度, 第3维Z代表深度:

CSS Z-Index不起作用?如何使用堆栈顺序修复它1

CSS提供了一个名为索引这样我们就可以使用它来确定元素的深度。作为索引元素的值增加, 则将在第3维上位于其他元素的前面。

让我们继续一些示例, 看看如何使用索引以正确的方式。

如果没有定义位置或位置, 则Z-Index无效:静态

首先要知道的是, 网页上的每个元素都具有默认位置-换句话说, 是静态定义的位置(默认情况下)。假设我们的页面上有一个红色框和一个蓝色框:

<div class="box box-red"></div>
<div class="box box-blue"></div>
CSS Z-Index不起作用?如何使用堆栈顺序修复它2

如果你申请索引直接转到框, 你会发现它无法正常工作。这是因为它们还没有定义的位置:

.box {
  height: 150px;
  width: 150px;
}

.box-red {
  background: red;
  z-index: 1;
}

.box-blue {
  background: #00d5f1;
  bottom: 80px;
  left: 55px;
  z-index: 2;
}

这是为什么索引无法正常工作。为了解决这个问题, 我们可以应用位置属性到将要完成此操作的box类:

.box {
  height: 150px;
  width: 150px;
  position: relative;
}
CSS Z-Index不起作用?如何使用堆栈顺序修复它3

你也可以观看我的教程视频, 以查看z-index的示例用法:

什么是堆叠顺序?

如果我们删除索引这两个框中的属性, 即使没有其他属性, 蓝色框仍将位于红色框的前面索引财产了:

.box {
  height: 150px;
  width: 150px;
  position: relative;
}

.box-red {
  background: red;
}

.box-blue {
  background: #00d5f1;
  bottom: 80px;
  left: 55px;
}

呈现以下内容:

CSS Z-Index不起作用?如何使用堆栈顺序修复它4

因此, 当所有元素都处于同一层时, 一个元素仍将位于另一个元素的前面, 因为它们在Z轴方面也具有默认顺序。这称为堆叠顺序。

就像上面的例子一样, 当没有索引应用于元素时, 浏览器使用默认的堆叠顺序将元素堆叠在页面上:

1.根元素的背景和边框2.后裔未定位的块, 按在HTML中出现的顺序3.后裔未定位的元素, 按在HTML中出现的顺序来源:没有z-index属性的堆叠

请注意, 根元素是指<html>元素, 而未定位的元素是具有默认设置的元素位置:静态, 而定位元素是具有位置设置为另一个值。

如果我们添加另一个框, 但将其设置为位置属性为默认值static, 它将显示在蓝色和红色框的后面:

<div class="box box-red"><p>Positioned</p></div>
<div class="box box-blue"><p>Positioned</p></div>
<div class="box box-yellow"><p>Non-positioned</p></div>
.box {
  height: 150px;
  width: 150px;
  position: absolute;
}

p {
  color: #0a0a23;
  margin: 0;
  padding-left: 5px;
}

.box-red {
  background: red;
  top: 40px;
  left: 27px;
}

.box-blue {
  background: #00d5f1;
  top: 80px;
  left: 55px;
}

.box-yellow {
  background: rgb(251, 239, 0);
  position: static;
}

产生以下内容:

CSS Z-Index不起作用?如何使用堆栈顺序修复它5

虽然我们确实修改了蓝色和红色框以使用位置:绝对代替相对的, 并稍微调整其位置, 这有助于显示浏览器的默认堆叠顺序-同一级别上的已定位元素将始终出现在未定位的位置(或位置:静态)元素。

现在你可能想知道元素不在同一级别时会发生什么。现在让我们深入研究。

堆叠上下文:父元素的Z索引也适用于子元素

假设我们在红色和蓝色之间放置了一个黄色框:

<div class="box box-red">
  <div class="box box-yellow"></div>
</div>
<div class="box box-blue"></div>
.box-red {
  background: red;
  z-index: 1;
}

.box-blue {
  background: #00d5f1;
  bottom: 80px;
  left: 55px;
  z-index: 2;
}

.box-yellow {
  background: rgb(251, 239, 0);
  left: 25px;
  top: 25px;
  z-index: 3;
}

呈现以下内容:

CSS Z-Index不起作用?如何使用堆栈顺序修复它6

现在, 如你在代码中看到的那样, 即使黄色框具有较高的索引值与蓝色的值相比, 它位于蓝色框的后面。

这是因为黄色方框是红色方框的子项, 而索引父元素的始终也适用于其子元素。由于父元素的z-index较低, 因此其子元素继承相同的索引价值。

这是由于所谓的堆叠上下文。简而言之, 堆叠上下文就像之前的堆叠顺序列表的新实例一样:

  1. 根HTML元素
  2. 未定位元素(位置:静态)按它们出现的顺序
  3. 定位元素(位置设置为另一个值)

要记住的主要事情是, 具有索引除了默认值auto将创建一个新的堆栈上下文。

因此, 请看上面的HTML, 因为红色框上有一个z-inxex1, 它将为其子级黄色框创建一个新的堆栈上下文。在该堆叠上下文中, 红色框用作HTML根元素, 黄色框是其内部的定位元素。

然后, 因为蓝色框与红色框属于同一堆叠上下文, <html>元素作为根元素), 它将始终显示在黄色框上方。

如果你看到此类问题, 则可以通过将子元素从其父元素中移除, 或者删除父元素的position属性来解决此问题索引不会影响其子代:

<div class="box box-red"></div>
<div class="box box-yellow"></div>
<div class="box box-blue"></div>
.box {
  height: 150px;
  width: 150px;
  position: relative;
}

.box-red {
  background: red;
  z-index: 1;
}

.box-blue {
  background: #00d5f1;
  bottom: 240px;
  left: 55px;
  z-index: 2;
}

.box-yellow {
  background: rgb(251, 239, 0);
  bottom: 120px;
  left: 25px;
  z-index: 3;
}

这给了我们:

CSS Z-Index不起作用?如何使用堆栈顺序修复它7

注意, 还有许多其他属性会影响元素的堆叠上下文。你可以阅读有关它们的更多信息这里.

因为有点不直观, 所以这是最常见的原因之一索引不起作用。

不要为Z-Index分配大数字

另一个常见原因索引可能不起作用是因为有时人们会给索引属性:

.box-blue {
  z-index: 9999;
}

在我过去从事的几个项目中, 我经常看到人们将9999等非常大的数字分配给索引元素

当然可以, 但是就像你确实需要螺丝起子时使用锤子一样。

以这种方式描绘它–你进入了一个大型项目并正在处理某些HTML, 但是无论你尝试什么, 都无法使元素以正确的顺序显示。因此, 经过一堆的在线搜索和搜索, 你发现某个时候某人已经设置了全局索引属性设置为9999, 从而不断覆盖你的索引.

现在你知道如何使用索引正确地理解堆栈上下文, 你不必使用这样的大值:)

希望这篇文章对你的使用有所帮助。索引属性, 以及堆叠顺序和堆叠上下文。如果你想了解有关Web开发的更多信息, 请不要忘记订阅我的频道.

感谢你的阅读!

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: