z-index在两个固定元素上不起作用

我有两个固定容器，#meta和#meta-container，其中#meta应始终位于前景，因为它是一个全局控制元素。z-index在两个固定元素上不起作用

我的代码看起来像这样

#meta-container { 
 
    position: fixed; 
 
    z-index: 1; 
 
    left: 0; right:0; 
 
    bottom:0; top: 0; 
 
    background-color: red; 
 
    color: rgba(0, 0, 0, 0.87); 
 
} 
 

 
#meta { 
 
    position: fixed; 
 
    z-index: 2; 
 
    top: 40%; 
 
    width: 60px; 
 
    height: 25px; 
 
    display: flex; 
 
    background-color: black; 
 
}

<div> 
 
    <span id="meta"> 
 
     <span class="bar"></span> 
 
    <span class="bar"></span> 
 
    <span class="bar"></span> 
 
    <span class="bar"></span> 
 
    <span class="bar"></span> 
 
    </span> 
 
    #meta 
 
</div> 
 
<div id="meta-container" class="slidein"> 
 
    #meta-container 
 
</div>

但span#meta不上div#meta-container顶部显示。我没有在某处重新分配z-index。我还更改了z-index值进行测试，但没有帮助。我究竟做错了什么？

这么长 - 快乐的编码。

（1）编辑：更正了代码片段中的拼写。代码段现在正在工作（不幸的是我的代码不是）。

来源

2017-02-25 randmin

您的代码片段在运行时会显示两行，每行两个点 - 关心是什么问题应该更具体一点？ – CBroe

我其实并没有意识到我添加了一个片段。只是想演示代码。但是，为了完整起见，我将编辑该代码段，以便它更有意义。 – randmin

已解决：'span＃meta'嵌套在其他容器中（例如上面提到的div）。在我将它重构为与“div＃span-container”处于“同一级别”之后，定位现在对我有用。感谢所有人的帮助。感谢wscourge提供了一个更流畅的标记！ ;） – randmin

所有你需要做的是将top和left样式它们叠加：

#meta-container { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 

 
#meta { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 2; 
 
}

<div> 
 
    <span id="meta"> 
 
     <span class="bar"></span> 
 
     <span class="bar"></span> 
 
     <span class="bar"></span> 
 
     <span class="bar"></span> 
 
     <span class="bar"></span> 
 
    </span> 
 
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbb 
 
</div> 
 
<div id="meta-container" class="slidein"> 
 
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
 
</div>

来源

2017-02-25 12:25:07 wscourge

看起来像你的片段遭受同样的“越野车”行为我的是：应该是下面元素的“a”s线被堆积在b线的顶部（它至少看起来像这样当我选择部分文字时）。无论如何谢谢你抽出时间回答，我给了#meta元素一个左值0来跟随你的方法而没有成功。 – randmin

#meta-container { 
    position: relative; 
    width:100%; 
    height:100%; 
    . . . 
} 

#meta { 
    position: fixed; 
    . . . 
}

<div id="meta"> 
    <span class="bar"></span> 
    <span class="bar"></span> 
    <span class="bar"></span> 
    <span class="bar"></span> 
    <span class="bar"></span> 

    <div id="meta-container" class="slidein"> 
     ... 
    </div> 
</div>

来源

2017-02-25 12:35:31 Saeed

randmin：你可以在jsFiddle中看到上面的答案，例如：https://jsfiddle.net/vgvcjd87/1/ – Saeed

我需要两个元素都是固定位置。如果其中一个元素是相对位置的话，你的回答很好。 – randmin

#meta{ 
 
    border: 1px solid; 
 
    width: 25%; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 
    
 
#meta-container{ 
 
    border: 1px solid; 
 
    width: 25%; 
 
    color: red; 
 
    position: relative; 
 
}

<div id="meta"> 
 
    <span> 
 
    meta box 
 
    </span> 
 
    
 
</div> 
 

 
<div id="meta-container" class="slidein"> 
 
meta container box 
 
</div>

来源

2017-02-25 12:37:17

谢谢你的回答。你的解决方案是针对两个相对/绝对位置相对/绝对位置的元素，然而我需要修复这两个元素。 – randmin

我不确定你真正需要的是什么。在上面的例子'＃meta-container {0}中使用下面的CSS。背景：红色; 位置：相对; height：100px; } #meta { width：25％; 职位：固定; z-index：1; height：20px; }' –

z-index在两个固定元素上不起作用

回答

相关问题