Fatal编程技术网
  • css/
  • Css z指数越大，z指数越低？

Css z指数越大，z指数越低？

css

Css z指数越大，z指数越低？,css,Css,我似乎无法找到一种方法来为一个元素分配更大的z-index优先级，该元素的父元素的z-index低于覆盖元素 考虑这个例子： <div style="width: 100px; height: 100px; background: #F00; position: absolute; left: 0; top: 0; z-index: 1;"> <div style="width: 50px; height: 100px; background: #00F; positi

我似乎无法找到一种方法来为一个元素分配更大的
z-index
优先级，该元素的父元素的
z-index
低于覆盖元素

考虑这个例子：

<div style="width: 100px; height: 100px; background: #F00; position: absolute; left: 0; top: 0; z-index: 1;">
    <div style="width: 50px; height: 100px; background: #00F; position: absolute; left: 50px; top: 0; z-index: 3;"></div>
</div>
<div style="width: 100px; height: 50px; background: #0F0; position: absolute; left: 0; top: 50px; z-index: 2;"></div>
结果是：

预期结果：

您可以这样做，但前提是父对象上没有
位置：相对的
或
绝对的
属性。因此，如果从第一个div中删除
位置：absolute
，它将按预期工作


jsiddle:
元素首先在每个级别上排序。因此，它命令您的红色和绿色框，然后它命令您的红色框内的蓝色框，它已经被确定为在绿色框后面。这是没有办法的。你必须考虑你的元素的另一种布局，这将允许你想要的布局，比如简单。
结果是预期的结果。据我所知，z-index是相对于父级的，一旦你给它一个
位置，它就不是相对于文档的。你可以在第一个div中使用“position:absolute；z-index:auto”。@infous不是一个解决方案，因为
z-index
对于该元素很重要。只需将元素移到外部。只要您不在创建堆叠上下文（如转换）的元素上执行任何其他操作，此操作就有效