首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >CSS z-索引不使用位置相对。

CSS z-索引不使用位置相对。
EN

Stack Overflow用户
提问于 2018-07-03 13:22:49
回答 1查看 1.8K关注 0票数 1

我没有运气让z-index开始工作。虽然这一切看起来都很简单。我只需要显示一些覆盖其他内容的内容。这是为了创建一个简单的下拉控件,这样就可以暂时显示下拉菜单,而不会让下一个内容向下移动,然后再进行备份。

这是我的代码,简化了,并且是独立的:

代码语言:javascript
运行
复制
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Z-Axis</title>
    <style>
        #main_div {
            position: relative;
            z-index: 0;
            top: 0px;
            left: 0px;
        }
        .dropdown {
            position: relative;
            z-index: 1;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div id="main_div">
        <p>line 1 of text</p>
        <p>line 1 of text</p>
        <p>line 1 of text</p>
        <ul class="dropdown">
            <li>5</li>
            <li>10</li>
            <li>20</li>
        </ul>
        <p>line 2 of text</p>
        <p>line 3 of text</p>
        <p>line 4 of text</p>
        <p>line 5 of text</p>
        <p>line 6 of text</p>
    </div>
</body>
</html>

正如您所看到的,我在主-div中创建了一个父stacking context,但是这没有帮助。当我在Firefox或Chrome中运行上面的代码时,会显示下拉列表,并将第2-6行按下页面,而不是隐藏在下拉列表后面。

position必须是相对的,因为这些东西将是一个反应组件,并且定位在一个更大的页面的某个位置。下拉列表应该就在Line1下面,第2-6行应该隐藏在较低的z-索引平面上。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-03 13:25:49

你搞错的是position: relative而不是position: absolute。我改变了它,现在它起作用了。position: relative只使得它是相对的,而不是呈现任何DOM元素或其他DOM元素。

我添加了background: red,因此效果更直观。

您的z-index工作得很好,但是元素仍然呈现为尊重其他DOM元素。

根据MDN

  • relative 元素根据文档的正常流定位,然后根据上、右、下和左的值相对于其自身进行偏移。偏移量不影响任何其他元素的位置;因此,页面布局中为元素提供的空间与静态位置相同。当z-索引的值不是自动的时,此值将创建一个新的堆叠上下文。它对表*组、表行、表列、表单元格和表标题元素的影响未定义。
  • 从普通文档流中移除元素,并且在页面布局中没有为元素创建任何空间。它相对于其最近的定位祖先(如果有的话)定位;否则,它相对于初始的包含块。它的最终位置由上、右、底和左的值决定。

关键部分

代码语言:javascript
运行
复制
.dropdown {
    position: absolute;
    ...
}

片段

代码语言:javascript
运行
复制
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Z-Axis</title>
    <style>
        #main_div {
            position: relative;
            z-index: 0;
            top: 0px;
            left: 0px;
        }
        .list-wrapper {
          position: relative;
        }
        .dropdown {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            background: red;
        }
    </style>
</head>
<body>
    <div id="main_div">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
      <div class="list-wrapper">
        <p>line 1 of text</p>
        <ul class="dropdown">
            <li>5</li>
            <li>10</li>
            <li>20</li>
        </ul>
        <p>line 2 of text</p>
        <p>line 3 of text</p>
        <p>line 4 of text</p>
        <p>line 5 of text</p>
        <p>line 6 of text</p>
      </div>
    </div>
</body>
</html>

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51155746

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档