Question

这似乎很简单，但我会尝试一下：

我在另一个元素（ .bottom ）中有一个position:fixed（ .inside ）的嵌套元素，该元素也是固定的，并且{{1 }}。我需要让嵌套元素从隐藏的元素中取出并与另一个元素（ .top ）重叠，并将更高的z-index作为父元素。这意味着： .inside 应覆盖所有内容。

不幸的是，我无法更改HTML范围，也无法更改.top和.bottom的overflow:hidden值。当然不是z-index ......

这是标记：

overflow: hidden

...和CSS：

<div class="header">
  <div class="top"></div>
  <div class="bottom">
    <div class="inside"></div>
  </div>
</div>

这里是小提琴：http://jsfiddle.net/c7qqtu95/1/

Answer 1

您的嵌套元素位于其父级的堆叠上下文

中

将overflow: hidden应用于具有固定职位子级usually doesn't hide the child的父级。但父元素的堆叠上下文确实会对其固定位置的子元素产生影响。

问题在于，.inside未在＆＃39; z＆＃39;上独立编入索引。轴，因为它是其父.bottom的堆叠上下文的一部分，它已应用了自己的z-index。即使没有定义的z-index，.bottom也会创建新的堆叠上下文，因为它还有position: fixed。

根据MDN's documentation on stacking context：

将z-index值定位并分配给HTML元素会创建堆叠上下文（分配非完整不透明度）。

堆叠上下文可以包含在其他堆叠上下文中，并一起创建堆叠上下文的层次结构。

每个堆叠上下文完全独立于其兄弟姐妹：处理堆叠时只考虑后代元素。

每个堆叠上下文都是自包含的：在堆叠元素的内容之后，整个元素将被视为父堆叠上下文的堆叠顺序。

您必须从position: fixed z-index移除.bottom和.inside .top，使其位于position: absolute的同一堆叠环境中。

然后，您唯一的办法是在.bottom上使用/* important — do not change! */，此时您使用body { margin: 0; padding: 0; } .header { position: relative; z-index: 1; } .top { background: aqua; height: 40px; opacity: 0.5; position: fixed; /* important – do not change! */ width: 100%; z-index: 5; /* important – do not change! */ } .bottom { background: green; height: 40px; overflow: hidden; /* important – do not change! */ /*position: fixed; *//* important – do not change! */ position: absolute; top: 40px; width: 100%; /* z-index: 3; *//* important – do not change! */ } .inside { background: red; height: 40px; position: fixed; /* important – do not change! */ top: 20px; width: 100px; z-index: 10; /* this works now! */ }指定的三个属性中的两个都将被更改。

如果您无法容纳这些更改或编辑HTML，那么您无法追索。

＆＃13;

<div class="header">
    <div class="top"></div>
    <div class="bottom">
        <div class="inside"></div>
    </div>
</div>

＆＃13;

Exception in thread "main" java.util.NoSuchElementException
at java.util.Scanner.throwFor(Scanner.java:862)
at java.util.Scanner.next(Scanner.java:1485)
at java.util.Scanner.nextInt(Scanner.java:2117)
at java.util.Scanner.nextInt(Scanner.java:2076)
at I6Exc2.menuSelection(I6Exc2.java:28)
at I6Exc2.PersonsWrite(I6Exc2.java:120)
at I6Exc2.menuSelection(I6Exc2.java:43)
at I6Exc2.main(I6Exc2.java:19)

＆＃13;

z-index问题与嵌套的固定元素和溢出：隐藏

1 个答案:

您的嵌套元素位于其父级的堆叠上下文