Chrome中不同父母的元素的z-index [英] z-index of elements in different parents in Chrome

问题描述

有两个容器。一个是固定的，覆盖100％的屏幕。第二个是相对的 - 包含可滚动内容。问题是，要相对于彼此放置四个元素，如下所示：第一个在固定容器中，第二个在绝对位置，第三个固定，第四个在绝对位置。

 < div class =container fixed> 
< div class =el z1>< / div> 
< div class =el z3>< / div> 
< / div> 
< div class =container relative> 
< div class =el z2>< / div> 
< div class =el z4>< / div> 
< / div> 
  

但是，其中一个父项的z-index将总是小于另一个，为4个子元素执行排序。

有小提示的元素的另一个子元素之前

css父元素显示在子元素

可以覆盖父元素的z-index继承吗？

编辑 - 2： b
$ b

根据你想要完成什么，有很多替代方法你可以得到一个假的zindex行为，值得一看的是 pointer-events：none; 与透明的背景，你永远不会知道它在另一个元素之上。

如果是背景，你可以使用box-shadow有不同的设置来伪造它。

不能想出任何其他原因atm但如果你告诉我，我会尝试给它一个解决方案。

尊敬

There are two containers. One is fixed and covers 100% of the screen. Second is relative - contains scrollable content. The problem is that there are four elements to be positioned relative to each other as follows: 1st in a fixed container, 2nd in absolute, 3rd fixed, 4th in absolute.

<div class="container fixed">
    <div class="el z1"></div>
    <div class="el z3"></div>
</div>
<div class="container relative">
    <div class="el z2"></div>
    <div class="el z4"></div>
</div>

However, z-index of one of the parents will always be less than the other, which not allow to do order for 4 children elements.

There is fiddle http://jsfiddle.net/only_dimon/zkY4C/6/ I want order: yellow, green, white, black from bottom. But as you can see - yellow, white, green, black.

The result I want:

But elements should be in different containers.

Thanks in advance!

This helps for me: For many elements helps only html reconstruction. Luckily I don't need to use fixed container for fixed elements, because fixed element's position and sizes depends on window size, even if I put them into relative container.

解决方案

After some further investigation, child element can't/aren't suppose to be able to overrule the parent z-index, some browser for example Firefox though ignores parent index for some reason and displays your elements are you wish but every other browser I've tried (Opera,Safari,Chrome) does not, so no it's not possible to accomplish what you want without changing the mark-up of your HTML for cross-browser compatibility.

Edit:

You can even find quite some posts in the subject.

css - z-index - Get a child of an element with lower z-index on front of another child of an element with higher

css parent element to appear above child

can I override z-index inheritance from parent element?

Edit - 2:

Depending on what you want to accomplish there is many alternative way you could get a fake "zindex" behaviour, one thing worth looking at is pointer-events:none; together with a transparent background you'd never know it's above the other element.

If it's for the background, you could use box-shadows with diffrent settings to fake it.

can't come up with any other reason atm but if you tell me i'll try to give you a solution for it aswell.

Regards

这篇关于Chrome中不同父母的元素的z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！