This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.
该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。
Some interface designs may call for elements to be layered or stacked on top of each other.
一些界面设计可能要求元素彼此层叠或堆叠。
There are many ways that elements will naturally stack on top of each other. But we can control this stacking order using a combination of the position and z-index properties.
元素自然有很多方法可以彼此堆叠。 但是我们可以使用position和z-index属性的组合来控制此堆叠顺序。
In this final episode of AtoZ CSS season one we’ll learn about:
在AtoZ CSS第一季的最后一集中，我们将了解：
The default stacking order of the document 文档的默认堆叠顺序 What a stacking context is and how they interact with each other 什么是堆叠上下文以及它们如何相互交互How z-index controls layer order within stacking contexts
z-index如何控制堆叠上下文中的图层顺序
And a method I use for standardising z-index across a project
我用来在整个项目中标准化z-index的方法
When writing our HTML, elements that appear lower down in the document, naturally stack above elements further up.
编写HTML时，出现在文档中下方的元素自然会堆叠在上方的元素上方。
<body> <header class="site-header"></header> <main class="site-content"></main> <footer class="site-footer"></footer> </body>Given this snippet of HTML, the footer would stack on top of the main content area which would stack on top of the header if they were all positioned to overlap each other.
给定HTML的这一片段， footer将堆叠在主要内容区域的顶部，如果它们都位于彼此重叠的位置，则footer将堆叠在header顶部。
Elements can be overlapped by using a combination of position properties and offset properties top, right, bottom and left.
可以通过结合使用position属性和偏移属性top ， right ， bottom和left来重叠元素。
If I set position: absolute on each of these elements, they will all layout on top of each other. The footer comes last in the document so by default stacks on top of the previous two elements.
如果我在这些元素中的每个元素上都设置position: absolute ”，则它们将全部布局在彼此之上。 footer在文档中排在最后，因此默认情况下会堆叠在前两个元素的顶部。
.site-header, .site-content, .site-footer { position: absolute; width: 400px; padding: 20px; } .site-header {top: 0; left: 0;} .site-content {top: 50px; left: 50px;} .site-footer {top: 100px; left: 100px;}If I use the offset properties, top and left, we can see the order more clearly.
如果我使用offset属性top和left ，我们可以更清楚地看到顺序。
Whilst using position: absolute which creates elements that overlap each other, we’ve not yet created what’s known as a stacking context.
虽然使用position: absolute会创建彼此重叠的元素，但我们还没有创建所谓的stacking context 。
A stacking context is created in any of the following ways:
可以通过以下任意一种方式来创建堆栈上下文：
an element with position absolute or relative and a z-index value that’s not auto
位置absolute或relative且z-index值不是auto的元素
a flexbox item with z-index value that’s not auto
具有非auto z-index值的flexbox项
an element with an opacity less than 1
opacity小于1的元素
an element with transform set to anything other than none
transform设置为除none以外的none元素
By far the most common way of creating and using stacking context is the first example in this list so let’s focus on that for a minute.
到目前为止，创建和使用堆栈上下文的最常见方法是此列表中的第一个示例，因此让我们先关注一下。
Going back to the earlier example, we have three elements positioned on top of each other but currently, they do not have a z-index value.
回到前面的示例，我们有三个元素相互重叠，但是目前它们没有z-index值。
The z-index property allows us to control the order of the stacking.
z-index属性允许我们控制堆叠的顺序。
If I set z-index: 1 on the footer, z-index: 2 on the main and z-index: 3 on the header, the order of the default stack can be completely reversed.
如果设置z-index: 1上的footer ， z-index: 2上的main和z-index: 3上的header ，所述默认堆叠的顺序可以完全逆转。
This looks quite simple on the surface; the higher the z-index the higher the element stacks – so a z-index: 9999 will always be on top of z-index: 9. Unfortunately, it’s a bit more complex than that.
表面上看起来很简单。 z-index越高，元素堆栈的数量就越高–因此， z-index: 9999将始终位于z-index: 9顶部。 不幸的是，这要复杂得多。
If I add a box inside of the site-content container and position it just outside the bottom right corner, we can see that it is above the green box and below the pink box.
如果我在site-content容器中添加一个框并将其放置在右下角的外部，我们可以看到它在绿色框上方和粉红色框下方。
.box { position: absolute; bottom: -25px; right: -25px; z-index: 4; /* won't work :( */ width: 75px; height: 75px; border: 1px solid #000; } .site-header {top: 0; left: 0; z-index: -1;} .site-content {top: 50px; left: 50px;} .site-footer {top: 100px; left: 100px; z-index: 3;}Based on our knowledge of z-index, we might think that to make this yellow box appear above the pink box, we can just set a higher value for z-index.
根据我们对z-index ，我们可能会认为，要使该黄色框出现在粉红色框上方，我们可以为z-index设置更高的值。
If I set z-index: 4, which is higher than z-index: 3 we see no change. It’s common for people to try and force the stacking by trying a really huge number like 9999 but doing this has no effect either. Seeing z-index values like this peppered throughout a codebase is a bit of a code smell so try and avoid it if you can.
如果我将z-index: 4设置为高于z-index: 3则看不到任何变化。 人们通常尝试通过尝试一个非常大的数字(例如9999来强制堆叠，但是这样做也不起作用。 在整个代码库中看到类似这样的z-index值有点代码味道，因此请尽量避免。
The reason that we’re not able to get the desired result of the yellow box on top of the pink box is due to how z-index behaves within a stacking context.
我们无法在粉红色框顶部获得黄色框所需结果的原因是由于z-index在堆叠上下文中的行为方式。
In order to demonstrate this, let’s look at a slightly more involved example which I’ve borrowed from the MDN website.
为了证明这一点，让我们看一下我从MDN网站借来的更复杂的示例。
<header class="site-header blue"> <h1>Header</h1> <code>position: relative;<br/> z-index: 5;</code> </header> <main class="site-content pink"> <div class="box1 yellow"> <h1>Content box 1</h1> <code>position: relative;<br/> z-index: 6;</code> </div> <h1>Main content</h1> <code>position: absolute;<br/> z-index: 4;</code> <div class="box2 yellow"> <h1>Content box 2</h1> <code>position: relative;<br/> z-index: 1;</code> </div> <div class="box3 yellow"> <h1>Content box 3</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </main> <footer class="site-footer green"> <h1>Footer</h1> <code>position: relative;<br/> z-index: 2;</code> </footer> .blue {background: hsla(190,81%,67%,0.8); color: #1c1c1c;} .purple {background: hsla(261,100%,75%,0.8);} .green {background: hsla(84,76%,53%,0.8); color: #1c1c1c;} .yellow {background: hsla(61,59%,66%,0.8); color: #1c1c1c;} .pink {background: hsla(329,58%,52%,0.8);} header, footer, main, div { position: relative; border: 1px dashed #000; } h1 { font: inherit; font-weight: bold; } .site-header, .site-footer { padding: 10px; } .site-header { z-index: 5; top: -30px; margin-bottom: 210px; } .site-footer { z-index: 2; } .site-content { z-index: 4; opacity: 1; position: absolute; top: 40px; left: 180px; width: 330px; padding: 40px 20px 20px; } .box1 { z-index: 6; margin-bottom: 15px; padding: 25px 10px 5px; } .box2 { z-index: 1; width: 400px; margin-top: 15px; padding: 5px 10px; } .box3 { z-index: 3; position: absolute; top: 20px; left: 180px; width: 150px; height: 250px; padding-top: 125px; text-align: center; }Here we have a header, footer and main content container as before but inside the site-content we have three boxes which have all been positioned and given a z-index.
在这里，我们像以前一样有一个header ， footer和main content容器，但在site-content内，我们有三个均已放置并赋予z-index框。
Let’s look at the three primary containers first – the header, footer and main.
让我们首先看一下三个主要容器header ， footer和main 。
The header has a z-index of 5 so appears stacked above the main content which has z index: 4. The footer has a z-index of 2 so appears below the mainwith a higher z-index of 4. All good so far? Good.
该header具有z-index的5所以上述层叠出现main content ，其具有z index: 4 。 footer的z-index为2，因此出现在main下方， z-index较高，为4。到目前为止，一切都很好吗？ 好。
Things get a bit confusing with the three boxes inside of the main container.
main容器内部的三个盒子使事情有些混乱。
Content box 1 has a z-index of 6 but appears to be beneath the header with a lower z-index of 5.
内容框1的z-index为6，但似乎位于header下方， z-index较低，为5。
Content box 2 has a z-index of 1 but appears above the footer which has a higher z-index of 2.
内容框2的z-index为1，但出现在footer上方， footer z-index较高，为2。
So, what’s going on?
发生什么了？
All of this can be explained by the fact that all z-index values are resolved within their parent stacking context. Because the parent container .site-content has a higher z-index than the footer, any positioned elements within the .site-content are evaluated within that context.
所有这些可以通过以下事实来解释：所有z-index值都在其父堆栈上下文中解析。 由于父容器.site-content的z-index高于footer ，因此.site-content中的所有定位元素都将在该上下文中进行评估。
A good way to think about stacking order within a stacking context is to this of it like a sub-item in a nested ordered list.
考虑堆叠上下文中的堆叠顺序的一个好方法是像在嵌套有序列表中的子项一样。
This could be written as follows:
可以这样写：
Header: z-index: 5
标头： z-index: 5
Main: z-index: 4
主： z-index: 4
Box 1: z-index: 4.6
方框1： z-index: 4.6
Box 2: z-index: 4.1
方框2： z-index: 4.1
Box 3: z-index: 4.3
方框3： z-index: 4.3
Main: z-index: 4
主： z-index: 4
Footer: z-index: 2
页脚： z-index: 2
So even though, the header is z-index: 5 and content box 1 is z-index: 6, it’s rendering order is 4.6 which is still less than 5. As such, content box 1 appears below the header.
因此，即使header为z-index: 5且content框1为z-index: 6 ，其渲染顺序为4.6仍小于5。因此， content框1出现在header下方。
It’s a little confusing at first, but with practice, it does start to make sense!
起初有点令人困惑，但是通过实践，它确实变得有意义了！
I don’t want to end the season with something quite so complex, so let’s wrap up with a simple strategy I use for applying z-index throughout a project.
我不想结束本赛季那么复杂的事情，所以让我们总结一下我在整个项目中应用z-index的简单策略。
In the examples in this video, we used single digit increments for z-index values but what if you wanted to add a new element between two that are set with z-index: 3 and z-index: 4? You’d have to change a lot of values – possibly throughout an entire codebase which could become problematic and prone to CSS breaking on other parts of the site.
在该视频的示例中，我们为z-index值使用了个位数的增量，但是如果您想在两个使用z-index: 3和z-index: 4设置的元素之间添加新元素呢？ 您必须更改很多值-可能需要更改整个代码库中的值，这可能会引起问题，并且容易在站点的其他部分破坏CSS。
I like to use a z-index scale that goes up in steps of 10. This keeps things nice and consistent as I don’t like seeing hacky z-index values like 99999 and strange numbers like z index: 53 just look like something hasn’t been thought through properly.
我喜欢使用以10为步长的z-index比例尺，这样可以使一切保持良好和一致，因为我不喜欢看到像9999那样的黑z-index值和z index: 53这样的奇数：没有被适当考虑。
The other benefit of using a scale with multiples of 10 is that if you really do need to insert a new element between two others, there are 9 potential values you can pick between 10 and 20 but none that you can pick between 1 and 2.
使用10的倍数的刻度的另一个好处是，如果确实需要在其他两个元素之间插入一个新元素，则可以在10到20之间选择9个潜在值，而在1到2之间可以选择一个。
翻译自: https://www.sitepoint.com/atoz-css-screencast-z-index/
