了解css
Using the z-index to affect stacking order in CSS is a much deeper topic than it may appear at first. The idea seems quite simple, but if we take a look we can see that there is actually quite a bit going on here that warrants a closer examination.
使用z-index来影响CSS中的堆叠顺序是一个比起初看起来要深得多的话题。 这个想法似乎很简单，但是如果我们看一下，实际上可以看到有很多事情需要仔细研究。
Most of the time, stacking order just kind of works behind the scenes and we don’t really pay any attention to it. However, once we use relative or absolute positioning to move an object around the screen, we will end up with several elements occupying the same space. Which element is displayed on top is determined by the elements stacking order. We can adjust an elements stacking order by using the z-index property.
在大多数情况下，堆叠顺序只是幕后的一种工作，我们并没有真正注意它。 但是，一旦我们使用相对或绝对定位在屏幕上移动对象，我们最终将拥有几个占据相同空间的元素。 哪个元素显示在顶部取决于元素的堆叠顺序。 我们可以使用z-index属性调整元素的堆叠顺序。
The z-index is so named because it affects an elements position along the z-axis. The z-axis is the axis that goes from front to back from the user. If we think of the x-axis and y-axis as height and width, then z-axis would be the depth. The higher the z-index of an element, the closer it becomes to the user, and the lower the z-index, the further back on the screen it appears.
之所以这样命名z-index，是因为它会影响元素沿z轴的位置。 z轴是用户从前到后的轴。 如果我们将x轴和y轴视为高度和宽度，那么z轴就是深度。 元素的z索引越高，它离用户越近，z索引越低，它在屏幕上显示的越靠后。
If we do not specify any z-index values, the default stacking order from closest to the user to furthest back is as follows:
如果我们未指定任何z-index值，则从最接近用户到最远的默认堆叠顺序如下：
- Positioned elements, in order of appearance in source code 定位的元素，按照源代码中出现的顺序
- Inline elements 内联元素
- Non-positioned floating elements, in order of appearance in source code 未定位的浮动元素，按源代码中的出现顺序
- All non-positioned, non-floating, block elements in order of source code 所有非定位，非浮动的块元素，按源代码顺序
- Root element backgrounds and borders 根元素背景和边框
Based on the default stacking order above, you can see that any element that has been positioned, whether relative or absolute, will be placed above any element that is not positioned. Both positioned and non-positioned elements are of course, above the background of our root element.
根据上面的默认堆叠顺序，您可以看到已放置的任何元素(相对还是绝对)将放置在任何未放置的元素上方。 当然，定位元素和非定位元素都在我们根元素的背景之上。
有点混乱 (Mixing Things Up A Bit)
Now let’s say we want to move some of our elements around in the stacking order so different elements appear on top. We can use the z-index property on any positioned elements to adjust there stacking order. The z-index property can accept an integer, the auto value, or an inherit value. When using integers, the higher the positive number, the further up in the stacking order it will appear. You can use negative z-index values to move the element further down in the stacking order. If we do not use a z-index value on an element, it will render at the rendering layer of 0 and will not be moved. The stacking order now looks like this:
现在假设我们要按堆叠顺序移动一些元素，以便在顶部显示不同的元素。 我们可以在任何定位的元素上使用z-index属性来调整此处的堆叠顺序。 z-index属性可以接受整数，自动值或继承值。 当使用整数时，正数越高，其出现的堆叠顺序就越远。 您可以使用负的z-index值将元素按堆叠顺序进一步向下移动。 如果我们不在元素上使用z-index值，则它将在渲染层0渲染并且不会移动。 现在，堆叠顺序如下所示：
- Positioned elements with z-index of greater than 0, first in order of z-index from lowest to highest, then in order of appearance in source code 定位元素的z-index大于0，首先按照z-index从最低到最高的顺序排列，然后按照源代码中出现的顺序排列
- Positioned elements, in order of appearance in source code 定位的元素，按照源代码中出现的顺序
- Inline elements 内联元素
- Non-positioned floating elements, in order of appearance in source code 未定位的浮动元素，按源代码中的出现顺序
- All non-positioned, non-floating, block elements in order of source code 所有非定位，非浮动的块元素，按源代码顺序
- Positioned elements with z-index of less than 0, first in order of z-index from highest to lowest, then in order of appearance in source code. 定位元素的z-index小于0，首先按z-index从最高到最低的顺序排列，然后按照源代码中出现的顺序排列。
- Root element backgrounds and borders 根元素背景和边框
堆叠上下文 (Stacking Context)
An interesting thing happens though when we set a z-index value to 0 or auto: we establish a new stacking context. Let’s say we set #front to have a z-index of 5. Now, we have just established a new stacking context for any element descending from (contained in) #front. If #middle is contained within #front, and I set its z-index to 2, it should still appear above #front. Why? Because since we set a z-index value to #front, every descendant of #front is now being stacked in relation to #front. It may be helpful to look at this as a multiple number system (as demonstrated by Eric Meyer in CSS: The Definitive Guide):
但是，当我们将z-index值设置为0或auto时，会发生一件有趣的事情：我们建立了一个新的堆栈上下文。 假设我们将#front的z-index设置为5。现在，我们刚刚为从#front包含(包含在其中)的任何元素建立了一个新的堆栈上下文。 如果#middle包含在#front中，并且我将其z-index设置为2，它仍应出现在#front上方。 为什么？ 因为由于我们将z-index值设置为#front，所以#front的每个后代现在都相对于#front被堆叠。 将其视为多数系统可能会有所帮助(如Eric Meyer在CSS：权威指南中所展示的 )：
#front 5.0
#middle 5.2Since #front is the ancestor that sets the stacking context, it’s relative stacking level can be thought of as 0. Now when we set the z-index for middle, we are merely setting it’s local stacking value. Of course 2 is higher than 0, and therefore even though in our CSS it looks like #middle should be displayed behind #front, we can see that actually it should be displayed on top.
由于#front是设置堆栈上下文的祖先，因此可以将其相对堆栈级别视为0。现在，当将z-index设置为middle时，我们仅将其设置为本地堆栈值。 当然2大于0，因此即使在我们CSS中看起来#middle应该显示在#front后面，我们也可以看到实际上它应该显示在顶部。
For an example, consider the following code:
例如，请考虑以下代码：
<div id="one">
<div id="two"></div>
</div>
<div id="three"></div>#one{
position: absolute;
left: 0px;
top: 20px;
z-index: 10;
}
#two{
position: absolute;
left: 50px;
top: 30px;
z-index: 15;
}
#three{
position: absolute;
left: 100px;
top: 30px;
z-index: 12;
}
The result is that #two shows up below #three, even though the z-index value we gave it (line 11) is higher than the z-index value we gave #three (line 17). This is because #two is a descendant of #one, which established a new stacking context. Which means if we use our numbering system, we would get the following stacking order:
结果是，即使我们给出的z-index值(第11行)高于我们给出的#three的z-index值(第17行)，＃two仍显示在＃3以下。 这是因为#two是#one的后代，后者建立了新的堆栈上下文。 这意味着，如果我们使用编号系统，则会得到以下堆叠顺序：
#three 12
#two 10.15
#one 10.0Firefox弄错了 (Firefox Gets It Wrong)
Ok…that felt weird to say. We are all used to Firefox getting most CSS things right, but this is one area it gets wrong. According to CSS 2.1, no element can be stacked below the background of the stacking context (the root element for that particular context). What this means is if we adjust the CSS above to give our #two element a negative z-index, the content of #one should overlap over the content of #two, but the background color should not. The way IE renders this is correct. Both results are shown below:
好吧...这听起来很奇怪。 我们都习惯于Firefox使大多数CSS正确，但是这是一个错误的地方。 根据CSS 2.1，不能在堆叠上下文(该特定上下文的根元素)的背景下堆叠任何元素。 这意味着如果我们调整上面CSS，使#two元素的Z索引值为负，则#one的内容应与#two的内容重叠，但背景颜色不应重叠。 IE呈现此问题的方式是正确的。 这两个结果如下所示：
You can see that in IE, while the content of #one is still set above the content of #two, the background color remains behind it, as specified in CSS 2.1. Firefox on the other hand, shoves the entire #two element, background color and all, behind #one. Until this is fixed, be careful about using negative numbers for the z-index of an element.
您可以看到，在IE中，虽然#one的内容仍然设置为#two的内容之上，但是背景颜色仍然位于它的后面，如CSS 2.1中所指定。 另一方面，Firefox将整个#two元素，背景色和所有元素都推到#one后面。 在解决此问题之前，请注意对元素的z-index使用负数。
进行实验 (Go Forth and Experiment)
Definitely take this and play around with it. This is a topic that is best understood by setting up some positioned and non-positioned elements and experimenting with different z-index values. If you are feeling bold, check out the W3C’s really detailed breakdown of the stacking order of not just elements, but their background colors, background images, and borders. As with most topics in CSS, there is more here to understand than we first realize.
绝对可以接受并尝试一下。 通过设置一些定位和非定位元素并尝试不同的z-index值，可以最好地理解这一主题。 如果您感到胆大，请查看W3C的详细堆叠细目，不仅是元素的堆叠顺序，还包括它们的背景颜色，背景图像和边框。 与CSS中的大多数主题一样，这里需要了解的内容比我们最初认识的要多。
翻译自: https://timkadlec.com/2008/01/detailed-look-at-stacking-in-css/
了解css
扫一扫
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
