AtoZ CSS快速提示：掌握Z-index

This article is a part of our AtoZ CSS Series. You can find other entries to the series here. You can view the full transcript and screencast for z-index here.

本文是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。 您可以在此处查看z-index的完整成绩单和截屏视频。

Welcome to our AtoZ CSS series! In this series, I’ve been exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added quick tips on how to further utilize z-index.

欢迎来到我们的AtoZ CSS系列！ 在本系列中，我一直在探索不同CSS值(和属性)，每个CSS值(和属性)均以不同的字母开头。 我们知道有时候视频广播还不够，因此在本文中，我们添加了有关如何进一步利用z-index快速提示。

Z代表z-index (Z is for z-index)

Predictably, the final tip in this CSS series is all about z-index.

可以预见，本CSS系列文章的最后一个技巧是关于z-index 。

As discussed in the original screencast all about z-index, it’s a property used to control the ordering of layers in the document. There are a few complexities around stacking context (also covered in the video) but by and large, z-index is fairly limited in features.

正如在原始屏幕录像中讨论的有关z-index全部内容中所讨论的那样，它是用于控制文档中图层顺序的属性。 围绕堆栈上下文(视频中也介绍了)有一些复杂性，但是总的来说， z-index功能相当有限。

However, there are always details to dive into when in pursuit of sharpening your skills and becoming a master of your craft. Let’s have a look at a couple of tips for working with z-index.

但是，在追求提高技能并成为手艺大师时，总会有一些细节需要深入研究。 让我们看一下使用z-index的一些技巧。

z-index仅适用于定位的元素 (z-index only works for positioned elements)

If you want to control the stacking order of elements, you can do so with z-index. But z-index will only take affect if the element also has a position value of absolute, relative or fixed.

如果要控制元素的堆叠顺序，可以使用z-index 。 但是z-index仅在元素的position值也为absolute ， relative或fixed时才会fixed 。

Placing elements precisely with position is great for building up complex layouts or interesting UI patterns but it’s common to want to control stacking order without moving the element from its original place on the page.

将元素精确地放置在位置上对于构建复杂的布局或有趣的UI模式非常有用，但是通常需要控制堆叠顺序而不将元素从页面的原始位置移开。

If this is the case, you can just set position: relative but not provide any values for top, right, bottom or left. The element will remain in its original place on the page, the document flow won’t be interrupted and z-index values will take effect.

在这种情况下，您可以设置position: relative但不提供top ， right ， bottom或left任何值。 该元素将保留在页面上的原始位置，文档流不会中断，并且z-index值将生效。

您可以将z-index负数 (You can have negative z-index)

Layering elements is often done to build up complex shapes or UI components. This often means layering elements on top of each other, with ever-increasing values of z-index. To place an element on a layer below another one, it just has to have a lower value of z-index but that lower value can be negative.

通常可以对元素进行分层以构建复杂的形状或UI组件。 这通常意味着将元素叠加在一起，并且z-index值不断增加。 要将元素放置在另一个元素下面的层上，它只需要具有较低的z-index值，但是该较低值可以为负。

One area where this is useful is when using pseudo elements and wanting to position them behind the content of their parent element.

当使用伪元素并将其放置在其父元素的内容之后时，这是一个有用的领域。

Due to the way stacking context works, a negative value of z-index is needed on any :before or :after elements if they are to be positioned behind the text content of their parent element.

由于堆栈上下文的工作方式，如果要将任何:before或:after元素放置在其父元素的文本内容后面，则z-index值为负是必需的。

Take a look at the following Codepen and experiment with various values of z-index.

看看下面的Codepen并尝试使用各种z-index值。

See the Pen GNgvxO by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint( @SitePoint )的Pen GNgvxO 。

使用100步设置z-index (Use steps of 100 for setting z-index)

When dealing with z-index, it’s not uncommon to see code like this:

在处理z-index ，看到这样的代码并不罕见：

.modal {
  z-index: 99999;
}

This just looks hacky to me (and only gets worse when appended with !important). Seeing values like this is often symptomatic of a developer not understanding stacking context and trying to force one layer to be on top of another.

在我看来，这似乎很hacky(并且只有在加上!important才会变得更糟)。 看到这样的值通常是开发人员不了解堆栈上下文并试图迫使一层位于另一层之上的症状。

Instead of using arbitrary numbers like 9999 or 53 or 12, we can systemise our z-index scale and bring a bit more order to proceedings. This isn’t (just) because I have developer OCD. Honest.

代替使用9999或53或12这样的任意数字，我们可以将z-index比例系统化，并给程序带来更多的顺序。 这不是(仅仅是)因为我有开发人员OCD。 诚实。

Instead of using single digit increments for my z-index, I use increments of 100.

我没有使用z-index单位增量，而是使用100的增量。

.layer-one   {z-index: 100;}
.layer-two   {z-index: 200;}
.layer-three {z-index: 300;}

I do this to keep things organized, but also to be mindful of the numerous different layers being used throughout a project. Another benefit is that if a new layer needs to be added between two others, there are 99 potential values to pick from in between.

我这样做是为了使事情井井有条，同时也要注意整个项目中使用的许多不同层次。 另一个好处是，如果需要在其他两个图层之间添加新图层，则可以从中选择99个潜在值。

When building a z-index system, this manual approach is pretty solid but can be made more flexible when combined with the powers of a pre-processor like Sass.

在构建z-index系统时，此手动方法相当可靠，但结合使用诸如Sass之类的预处理器的功能时，可以使其更加灵活。

That’s all folks, this is the final post in our AtoZ CSS series! We hope you enjoyed it and learned plenty about the many features of CSS. To view all the entries in this series, click here.

所有人，这是我们AtoZ CSS系列的最后一篇文章！ 我们希望您喜欢它，并从中学习了CSS的许多功能。 要查看该系列的所有条目，请单击此处 。

翻译自: https://www.sitepoint.com/atoz-css-z-index/