Html 具有嵌套固定元素和溢出的z索引问题：隐藏

这似乎很聪明，但我会尝试一下：

我有一个嵌套元素，它位于另一个元素（.bottom）内，该元素也是固定的，并且具有

溢出：隐藏的
。我需要得到嵌套的元素，去掉隐藏的元素，并重叠另一个元素（.top），以更高的z索引作为父元素。这意味着：。内部应覆盖所有内容

不幸的是，我无法更改.top和.bottom的HTML范围和
z-index
值。当然不是溢出：隐藏

以下是标记：

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

这里有一个问题：
嵌套元素在其父元素的堆栈上下文中
将
溢出：隐藏
应用于具有固定位置子级的父级。但是父元素的堆叠上下文确实会影响其固定位置的子元素

问题是，
.inside
没有在“z”轴上独立索引，因为它是其父级
.bottom
的堆叠上下文的一部分，它应用了自己的
z索引。即使没有定义的
z-index
，
.bottom
也会创建一个新的堆叠上下文，因为它还有
位置：fixed

根据：


将z索引值定位并分配给HTML元素会创建堆叠上下文（分配非完全不透明度也是如此）
堆叠上下文可以包含在其他堆叠上下文中，并一起创建堆叠上下文的层次结构
每个堆叠上下文完全独立于其同级：处理堆叠时只考虑子元素
每个堆叠上下文都是自包含的：在堆叠元素的内容后，将按照父堆叠上下文的堆叠顺序考虑整个元素

对于
，您必须从
.bottom
中删除
位置：fixed
和
z-index
，以便
.inside
位于
.top
的相同堆叠上下文中

那么您唯一的办法就是在
.bottom
上使用
position:absolute
，此时您用
/*表示的三个属性中的两个非常重要-请勿更改*/将被更改

如果您不能适应这些更改或编辑HTML，那么您就没有追索权


正文{
保证金：0；
填充：0；
}
.标题{
位置：相对位置；
z指数：1；
}
.顶{
背景：水；
高度：40px；
不透明度：0.5；
位置：固定；/*重要–请勿更改*/
宽度：100%；
z指数：5；/*重要–请勿更改*/
}
.底部{
背景：绿色；
高度：40px；
溢出：隐藏；/*重要–请勿更改*/
/*位置：固定；*/*重要–请勿更改*/
位置：绝对位置；
顶部：40px；
宽度：100%；
/*z索引：3；*/*重要–请勿更改*/
}
.里面{
背景：红色；
高度：40px；
位置：固定；/*重要–请勿更改*/
顶部：20px；
宽度：100px；
z-index:10；/*现在可以了*/
}

这种定位真的毫无意义。div的位置不是相互关联的，而是视口。
。top
z-index重叠
。bottom
z-index只是减小
。top
z-index小于
。bottom
请参见：-再次阅读他的问题。问题是，他无法更改z-index的值。根据您提供的限制，这是不可能的！。底部有一个滚动行为，如果z-index高于.top，则会导致其内容重叠。所以基本上这在ios中是不可能的？因为除了ios chrome和safari之外，我的所有浏览器都可以使用它。我有一个搜索页面，其中有一个抽屉是
位置：固定的
，聚焦搜索输入会触发包含元素的输入，使其成为
位置：固定的
自动完成。除了ios，它可以在任何地方工作。在ios中，东西是看不见的，你能看到的只有光标。疯狂！没有更多的信息我不能说。但是有了a，你可能会有一个自己的问题。
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! */
    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; /* doesn't work! */
}