Question

让我们说我有一些文件

＆＃13;

        #a{width: 10px; height: 10px; background: red; z-index: 10;}
        #b{width: 100%; height: 100%; background: black; z-index: 5; position: absolute;}

＆＃13;

    <body>
        <div id="a">foo</div>
        <div id="b">bar</div>
    <body>

＆＃13;

#b div涵盖#a，因为#b有absolute位置。

如何在不改变#a位置的情况下强制#b落后#a ？

Answer 1

您可以将position: relative添加到#a元素。

Answer 2

您必须在第一个div之外设置position以外的static来应用z-index

等样式

#a {
  width: 100px;
  height: 100px;
  background: red;
  z-index: 10;
  position: relative;
}

#b {
  width: 100%;
  height: 100%;
  background: black;
  z-index: 5;
  position: absolute;
  left:0;
  top:0;
}

<div id="a">foo</div>
<div id="b">bar</div>

Answer 3

您应该为第一个div添加相对位置：

<body>
    <div id="a">foo</div>
    <div id="b">bar</div>
<body>
<style>
    #a{width: 10px; height: 10px; background: red; z-index: 10; position:relative}
    #b{width: 100%; height: 100%; background: black; z-index: 5; position: absolute;}
</style>

具有绝对位置的CSS force div位于具有静态位置的div之后

3 个答案: