Question

我已经知道z-index定义了当前上下文中盒子的堆栈级别，但是z-index意味着什么特殊的（9999相同）？因为经常使用它们。

e.g。

.outerBox{
  display:block;
  z-index:1001;
}

提前致谢！

Answer 1

z-index定义哪个定位元素出现在顶部（类似图层的排序）。

因此z-index: 1000会显示在z-index 999之上。

执行z-index: 1001是一种尝试出现在＃34}顶部＆＃34; z-index: 1000

的项目

Answer 2

与z-index: 9999的目的相同。这是一个丑陋的黑客移动绝对/相对/固定前面的元素。

Answer 3

如上所述，它用于堆叠元件。如果他们或他们的作品位于同一个地方，那么z-index更高的那个将位于顶部。

在这个简单的例子中，有两个相同的结构，但首先是可见类黄色div将位于顶部，第二个不会，取决于z-index设置。

<div class='container'>
<div class='red'></div>
<div class='yellow visible'></div>
</div>
<div class='container'>
<div class='red'></div>
<div class='yellow notvisible'></div>
</div

和CSS的一部分：

.red { top:0; z-index:10;}
.yellow {top:0;}    
.visible {z-index:20;}
.notvisible {z-index:5;}

Example

z-index：1001在css中意味着什么

3 个答案: