Z-Index解释:网页元素的对齐

Wordpress大师

Z-Index解释:网页元素的对齐     Rebecca Ohanes 2020年11月30日网站建设9分钟读     

你在试图弄清楚HTML元素的堆叠顺序吗?让我们向你伸出援助之手，为你做繁重的工作。首先，这是关于z-index你需要知道的:CSS的z-index属性设置z-order。这就是为什么开发人员使用它来确定元素在堆叠顺序中的位置。

通常会出现两种错误。第一个是因为z索引只在元素是a）定位元素，b）伸缩项或c）网格项时起作用。定位元素是指位置属性不是的元素。Flex项目是其父元素的显示属性为< Flex >或的元素。对于网格项，父元素的显示属性是或。

如果你使用了z索引，但由于某种原因，它没有发挥作用，那可能是你在错误的元素上使用了它。所以，你可以先试试上面提到的方法，看看它是否能解决你的问题。第二个最常见的错误是，开发人员认为他们只需要z-index来确定元素的堆叠顺序。这就是为什么他们把揭示元素精确位置的其他规则排除在方程之外的原因。但是现在还没有必要放弃希望，把你的电脑往墙上摔。我们会告诉你所有必要的步骤。首先，我们将看一下HTML元素的分层表示。接下来，我们将定义什么是堆叠上下文。然后，我们将向您展示如何识别生成堆叠上下文的元素。最后，我们将分享必要的规则，以找出元素的顺序在堆叠上下文中。

我们保证我们有你需要的所有答案!“分层表示”   

在CSS中，你必须把每个HTML元素想象成三维的。如图所示，每个元素可以水平、垂直或沿着z轴定位。虽然前两个位置很简单，但让我们来看看为什么z轴位置如此重要。我们将使用10Web的登陆页面作为AI网站构建器的例子。

  

在本页的右下方，您可以看到两个呼叫行动（CTA）按钮。一个告诉人们“快点”，然后获得终身服务，而另一个鼓励用户“问一个问题”。如果你仔细观察，你会注意到那些cta在网站上方徘徊。即使你向下滚动，它们也会停留在前面，覆盖后面的东西。

这说明了什么?确切地说，CTA和网页内容重叠，CTA按钮位于页面的前面。基本上，这就是为什么z轴位置如此重要，因为它显示了元素是如何堆叠的。什么是堆叠上下文?您基本上可以将堆叠上下文想象为具有共同父元素的一堆元素。事情是这样的:堆叠上下文可以包含由它们的子元素生成的其他堆叠上下文。每个元素都属于一个堆叠上下文，而这个堆叠上下文是离该元素最近的那个。请记住，在堆叠上下文中，元素组沿着z轴一起移动。基本上，您有一个HTML元素作为每个堆叠上下文的根元素。每当这样一个元素生成一个堆叠上下文时，该元素的所有子元素都将获得它们特定的堆栈级别。堆栈级别指的是在相同的堆栈上下文中，元素在z轴上相对于其他堆栈级别的位置。这里重要的是，元素是通过叠加上下文来分隔的。换句话说，一个堆叠上下文的元素不能出现在另一个堆叠上下文的元素之间。所以元素总是相对于它自己的堆叠上下文，而不是相对于其他的堆叠上下文。如果一个元素属于一个位于堆叠顺序底部的堆叠上下文，那么无论它的z-index值有多大，它都不可能位于堆叠顺序中位置更高的堆叠上下文的元素前面。正如您所看到的，元素的位置总是相对于它的堆叠上下文。在堆叠上下文中，堆栈级别较高的元素总是位于堆栈级别较低的元素前面。元素在z轴上的位置不能相同。但是，如果在堆叠上下文中有具有相同堆栈级别的元素，则根据树的顺序将它们前后定位。我们在这里看到的是两个不同的堆叠上下文，每一个都有一个元素。Item2（即蓝色元素）的z指数值很低（- 9999999），而Item1（即红色元素）的z指数值很高（9999999）。根据元素的值，您可以假设红色元素（即项目1）位于蓝色元素（即项目2）的前面。但是让我们记住上面提到的发现。更具体地说，元素的位置总是相对于它们的堆叠上下文。在这个例子中，这意味着:红色元素的位置不可能高于蓝色元素，无论它的z指数值有多高。为什么?因为它的堆叠上下文在堆叠顺序中的位置比蓝色元素的堆叠上下文低。了解哪些元素组或子元素组可以相互比较是很重要的。在这方面，我们需要遵循一些特定的规则。在这些规则的帮助下，您将了解是否生成了堆叠上下文。这将允许您了解哪些元素组可以相互比较。通过比较，就有可能找出实际的堆积顺序。首先，堆叠上下文是通过不同的方式生成的。让我们看看可以识别是否生成了堆叠上下文的许多方法。当元素的标签是HTML当元素的位置是绝对的或相对的并且z-index不是当元素的位置是固定的或粘性的当元素是一个伸缩项目当元素是一个网格项目当不透明度小于1当混合混合模式不是当变换，过滤器，透视，剪辑路径，蒙版，当将-change有值或当包含有值， ， ，或  

但是，当然，事情比这稍微复杂一点，这是为什么:有某些元素被视为堆叠上下文，即使他们不是。更具体地说，这些元素可能会被误认为是自己生成堆叠上下文的元素，而实际上它们并没有。他们只是被这样对待。常规的堆叠上下文和这种类型的“wannabe堆叠上下文”之间的区别在于:由这个“wannabe堆叠上下文”的子元素生成的任何堆叠上下文都属于父堆叠上下文，而不属于这个“wannabe堆叠上下文”。这里是“wannabe堆叠上下文”是如何生成的:浮点值不是 z-index值显示值或 的元素< div id = “ div3 “ > < / div >< div id = “ div4 “ > < / div >< div id = “ div5 “ > < / div >< / div >< / div >让我们描绘一个更清晰的画面:例如，您有一个根元素（#div1），它生成一个堆叠上下文。这个堆叠上下文包含一个浮动元素（#div2）。现在，正如您在示例中看到的，这个浮动元素有三个子元素。其中一个子元素（#div3）进一步生成一个堆叠上下文。这个生成堆叠上下文的子元素属于上面提到的根元素生成的堆叠上下文。根元素（#div1）的子堆叠上下文是元素#div2和#div3。然而，被浮动元素的其他子元素（#div4， #div5）将被浮动元素视为其堆叠上下文的生成器。

堆叠上下文中的顺序

  

在了解了如何确定何时生成堆叠上下文中以及如何检测似乎正在生成堆叠上下文中但实际上并没有生成的元素之后，了解如何确定堆叠上下文中哪些元素位于哪些元素的前面或后面是很重要的。要做到这一点，你必须遵循特定的规则。以下是确定元素在堆叠顺序中的位置的6条规则: z-index为负值的元素块级别元素（display: Block）浮动元素Inline level元素（display: Inline | Inline - Block） z-index为负值的定位元素的值为或<0>或者是生成堆叠上下文的元素z-index为正的元素

注意，每个生成堆叠上下文的元素都是一个常规元素。它在父堆栈上下文中的堆叠级别也由这些规则决定。为了帮助您更好地理解这一切，这里有一个关于在没有z索引的情况下堆叠顺序如何工作的编码示例，因此我们显示规则2、3、4和5。注意，你可以通过不透明度值来改变元素的位置，因为如果不透明度值小于1，它会生成一个堆叠上下文。元素的位置要么比其他元素高，要么比其他元素低，它们的位置不可能相同。有一组元素沿着z轴一起运动。这样的组称为堆叠上下文。每个堆叠上下文都有一个根HTML元素，它生成一个堆叠上下文。每个元素都属于一个堆叠上下文。元素在z轴上的位置相对于其堆叠上下文的位置，由上述6条规则决定。堆叠上下文的子元素总是位于它们的堆叠上下文生成元素（即根元素）之上。

所有这些都是递归工作的，这意味着它适用于任何元素。现在，我们知道这是一个真正的挠头，但我们解决了你的问题，还是怎样?请留言告诉我们!你喜欢这篇文章吗?传播这个词!留言取消回复

您的电子邮件地址将不会被公布。必填字段标记为*

您的电子邮件地址将永远不会被发布或共享。必填字段标记为*

COMMENT*

NAME *

EMAIL ADDRESS *

WEBSITE

在此浏览器中保存我的姓名、电子邮件和网站，以便下次评论时使用。









相关文章WordPress开发者SASS:这里是你必须知道的10个视频优化技巧，让网站更快!如何用5个简单的步骤建立一个WordPress商业网站#design # WordPress