为什么用position:static忽略z索引？
查看此评论from jquery-ui
// Ignore z-index if position is set to a value where z-index is ignored by the browser
// This makes behavior of this function consistent across browsers
// WebKit always returns auto if the element is positioned我看到如果元素为position: static，则jquery的zIndex()返回0。
在position:static上不支持z索引吗？(适用于我的Chrome浏览器，还没有测试跨浏览器)
回答 2
Stack Overflow用户
发布于 2011-12-13 17:00:29
因为position: static的意思是“忽略来自left、top、z-index等的所有定位指令”。
'z-index'
Value: auto | <integer> | inherit
Initial: auto
Applies to: positioned elements- http://www.w3.org/TR/CSS21/visuren.html#z-index
静态如果一个元素的‘
’属性的值不是'static‘，那么这个元素就被定位了。
- http://www.w3.org/TR/CSS21/visuren.html#positioned-element
Stack Overflow用户
发布于 2017-07-30 17:57:57
对于flex-items ( flex-container的直接子元素，具有display: flex或display: inline-flex的元素)或网格项目( grid-container的直接子元素，具有display: grid或display: inline-grid的元素)，z-index不会被忽略。
规格报价
Flex items绘制与内联块CSS21完全相同，不同之处在于使用
order-modified document order代替原始文档order，并且auto以外的z-index值创建堆叠上下文，即使position为static。
当它们定位到相交的grid areas中时，甚至当定位在不相交的区域时，由于负边距或定位，
Grid items可能会重叠。grid items的绘制顺序与内联块CSS21完全相同，不同之处在于使用order-modified document order代替原始文档顺序，并且
auto以外的z-index值创建堆叠上下文，即使position为static(行为与position为relative完全相同)。因此，可以很容易地使用z-index属性来控制网格项的z轴顺序。
Flexbox示例
因此，假设我们有一个重叠的布局(.flex-item-two使用负边距重叠.flex-item-one )：
.flex {
display: flex;
align-items: center;
}
.flex-item-one {
width: 100px;
height: 100px;
background-color: red;
margin-right: -50px;
}
.flex-item-two {
width: 200px;
height: 200px;
background-color: green;
}<div class="flex">
<div class="flex-item flex-item-one">One</div>
<div class="flex-item flex-item-two">Two</div>
</div>
如果flex-item-one索引大于.flex-item-two的索引，则.flex-item-one与.flex-item-two重叠。
.flex {
display: flex;
align-items: center;
}
.flex-item-one {
width: 100px;
height: 100px;
background-color: red;
margin-right: -50px;
z-index: 1;
}
.flex-item-two {
width: 200px;
height: 200px;
background-color: green;
}<div class="flex">
<div class="flex-item flex-item-one">One</div>
<div class="flex-item flex-item-two">Two</div>
</div>
CSS网格示例
#grid {
display: inline-grid;
width: 250px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr
}
#A {
grid-column: 1 / span 2;
grid-row: 2;
align-self: end;
background-color: #4f81bd;
}
#B {
grid-column: 1;
grid-row: 1;
z-index: 10;
background-color: #8064a2;
}
#C {
grid-column: 2;
grid-row: 1;
align-self: start;
margin-left: -20px;
background-color: #f79646;
}
#D {
grid-column: 2;
grid-row: 2;
justify-self: end;
align-self: start;
background-color: #9bbb59;
}
#E {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
z-index: 5;
justify-self: center;
align-self: center;
background-color: #c0504d;
}
#grid > * {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 40px;
font-size: 32px;
}
#C, #D {
padding: 10px 20px;
}<div id="grid">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
</div>
https://stackoverflow.com/questions/8486475
复制相似问题