绝对位置具有比固定位置更大的 z-index

Posted 2023-03-06

【中文标题】绝对位置具有比固定位置更大的 z-index

【英文标题】：Position absolute has greater z-index than position fixed

【发布时间】：2013-04-25 06:32:25

【问题描述】：

我有一个相对定位的元素的问题。问题是我有一个位置固定的标题和相对定位的内容。如果我向下滚动内容，则元素将放在标题的前面。我尝试使用 z-index 但我无法让它工作。我已将z-index:999 放在标题上。

在这里你可以看到我的jsFiddle

这是一张图片：

【问题讨论】：

或许你能找到答案in this question？

同时设置 z-index，固定的和相对的。

在position:fixed 我给了z-index:9999 nad 在relative z-index:1

你做到了？然后我们需要看一些代码。请使用 html 和 css 编辑您的问题。

好的，我用 jsFiddle 编辑了我的问题

【参考方案1】：

“内容”是相对于窗口的，而不是灰色方块。

您是否尝试制作那个灰色方块position:relative？

没有 HTML 和 CSS，真的很难知道真正的原因。

【参考方案2】：

相对定位元素上的z-index 应低于固定位置元素上的z-index。这是一个简单的例子：

HTML

<div id="fixed">Fixed Position</div>
<div id="relative">Relative Position</div>

CSS

body
    height: 3000px;


#fixed
    top: 0;
    height; 100px;
    background: green;
    width: 100%;
    position: fixed;
    z-index: 2;


#relative
    position: relative;
    top: 100px;
    left: 50px;
    height: 100px;
    width: 100px;
    background: red;
    z-index: 1;

工作示例： http://jsfiddle.net/XZ4tM/1/

修正你的例子

标题样式有问题，有两个冒号:: 继续z-index 属性值。

  .header
        width:960px;
        background: #43484A;
        height:80px;
        position: fixed;
        top:0;
        z-index: 9999; /* Removed extra : here */
   

固定示例 http://jsfiddle.net/kUW66/2/

【参考方案3】：

我认为您所做的是正确的，即仅在一个选项中使用 z-index。我有一些工作要你理解。

请关注JS Fiddle link

HTML

<div id="header">Header</div>
<div id="content1"><div id="content2"></div></div>

CSS

body
    margin:0px auto;
    color:#FFF;

#header
    background-color:#006666;
    width:100%;
    height:50px;
    position:fixed;
    text-align:center;
    font:bold 12px Arial, Helvetica, sans-serif;
    line-height:50px;
    display:block;
    z-index:10;

#content1
    width:70%;
    height:1200px;
    margin:0px auto;
    background-color:#FFFF66;
    position:relative;
    top:50px;
    z-index:9;


#content2
    width:50px;
    height:250px;
    margin:0px auto;
    background-color:#F60;
    postition:absolute;
    left:50px;
    top:50px;

希望对您有所帮助。

【讨论】：

这不是您使用 jsFiddle 链接发布代码的方式。再试一次。

【参考方案4】：

   .categories li
        position:relative;
        z-index:-1;
        list-style: none;
        float:left;
        width:310px;
        height:310px;
        color:white;
        background:#77647F;
        margin-right:10px;
   

检查这个小提琴:)HERE

我已将 z-index 更改为 -1 以使其正常工作。

【讨论】：

请注意，使用负的 z-index 往往会使内容无法点击，这在许多情况下都是有问题的。