如何覆盖“继承” z指数？ [英] How to override "inherited" z-indexes?

问题描述

我需要重写继承的z-index的概念。

I am needing to override the notion of inherited z-indexes.

例如在此代码中

<style>
div{
  background-color:white;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
</style>
<div style="position: fixed; z-index: 2;">
   div 1
   <div style="position: fixed; z-index: 3;">
     div 2
   </div>
 </div>
<div style="position: fixed; z-index: 2;">
 div 3
</div>

http://jsbin.com/epoqo3/3

我想要 div 2 显示，而是显示 div 3 。

I want for div 2 to be displayed, but instead div 3 is displayed. How can I change this behavior without changing my structure.

推荐答案

你不能给一个孩子更高的 z-index 比它的父。你可能想重新思考你的设计，如果是这样的话，或者考虑让孩子从父母暂时弹出，以便在比父母更高的索引上显示。

You can't give a child higher z-index than its parent. You may want to rethink your design if this is the case, or consider popping the child out of the parent temporarily to show it on a higher index than its parent.

在这种情况下，div的物理顺序也可以帮助。如果你在最后一个后移动第一个，你会得到首选的渲染。但这可能不适合您的情况。

The physical order of the divs in this case can help as well. If you move the first down after the last, you'll get the preferred rendering. But this may not be ideal for your situation.

这篇关于如何覆盖“继承” z指数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！