跳转到:

这篇翻译不完整。请帮忙从英语翻译这篇文章

« CSS « Understanding CSS z-index

Stacking context 层叠上下文 例子 1

先看一个基础的例子。在根元素的层叠上下文中,有两个都是相对定位且没有设置z-index 属性的DIVs(DIV #1 和 DIV #3)。在 DIV #1 中有一个绝对定位的 DIV #2,而在 DIV #3 中有一个绝对定位的 DIV #4,DIV #2 和 DIV #4 也都没有设置z-index 属性。

现在唯一的层叠上下文就是根元素的上下文。因为没有  z-index  值,所有的元素按照出现(在 HTML 中)的顺序层叠。

Stacking context example 1

如果给 DIV #2 设置一个正的 z-index  值 (non-zero 且 non-auto) ,那么 DIV #2 会渲染在所有其他 DIVs 之上。

Stacking context example 1

然后如果给 DIV #4 也设置一个正的 z-index  值,且这个值比给的DIV #2 设置的值要大,则 DIV #4  会渲染在所有其他 DIVs (包括 DIV #2)之上。

Stacking context example 1

在这个列子中,DIV #2 和 DIV #4 并不是 siblings 关系(因为它们的父元素不同),但即使如此,我们仍通过 z-index 的值控制 DIV #4 和 DIV #2 的层叠关系。这是因为,DIV #1 和 DIV #3 没有 z-index 的值,也就没有生成一个层叠上下文,意味着DIV #1 和 DIV #3的所有内容(包括 DIV #2 和 DIV #4)都属于同一个层叠上下文(即根元素的上下文).

In terms of 层叠上下文s, DIV #1 和 DIV #3 are simply assimilated into the root element, 和 the resulting hierarchy is the following:

  • root stacking context
    • DIV #2 (z-index 1)
    • DIV #4 (z-index 2)
注意: DIV #1 和 DIV #3 不是透明的。记住所有设置了 opacity 小于 1 的定位元素都会隐式地生成一个层叠上下文(和给元素增加一个 z-index 值的效果相同)。上述的例子是为了说明,当父元素没有生成一个层叠上下文环境的时候,各元素是怎么层叠的。

Example

HTML

<div id="div1">
<br /><span class="bold">DIV #1</span>
<br />position: relative;
   <div id="div2">
   <br /><span class="bold">DIV #2</span>
   <br />position: absolute;
   <br />z-index: 1;
   </div>
</div>

<br />

<div id="div3">
<br /><span class="bold">DIV #3</span>
<br />position: relative;
   <div id="div4">
   <br /><span class="bold">DIV #4</span>
   <br />position: absolute;
   <br />z-index: 2;
   </div>
</div>

</body></html>

CSS

.bold {
    font-weight: bold;
    font: 12px Arial;
}
#div1,
#div3 {
    height: 80px;
    position: relative;
    border: 1px dashed #669966;
    background-color: #ccffcc;
    padding-left: 5px;
}
#div2 {
    opacity: 0.8;
    z-index: 1;
    position: absolute;
    width: 150px;
    height: 200px;
    top: 20px;
    left: 170px;
    border: 1px dashed #990000;
    background-color: #ffdddd;
    text-align: center;
}
#div4 {
    opacity: 0.8;
    z-index: 2;
    position: absolute;
    width: 200px;
    height: 70px;
    top: 65px;
    left: 50px;
    border: 1px dashed #000099;
    background-color: #ddddff;
    text-align: left;
    padding-left: 10px;
}

Result

See also

Original Document Information

 

文档标签和贡献者

此页面的贡献者: VickyJin
最后编辑者: VickyJin,