Question

我四处寻找解决方案，似乎周围有一些解决方案，但我似乎没有让它发挥作用，任何想法都会受到高度赞赏。

我有三个div进入div容器（居中）用作背景（z-index : -10;）。我想在之前的div之上浮动另一个div（它将是另一个容器z-index : 5;）。

下面的HTML：

<div class="div-backall ">
<div class="div-backtop">
        <p>1111</p>
    </div>
<div class="div-backmid">
        <p>2222</p>
    </div>
<div class="div-backbottom ">
        <p>3333</p>
    </div>
</div>
<div class="div-main">
    <p>Main text goes here</p>
</div>

下面的CSS：

.div-backall {
    width: 90%;
    height: 100%;
    z-index : 1;
    margin-left : auto;
    margin-right : auto;
    position : absolute;
}
.div-backtop {
    width: 90%;
    height: 20%;
    background-color: #D8E4F8;
    margin: -5px 0 0 0;
    position : absolute;
    margin-left : 5%;
    margin-right : 5%;          
}
.div-backmid {
    width: 90%;
    height: 75%;
    background-color: #F1EFE2;
    margin: 14% 0 0 0;
    position : absolute;
    margin-left : 5%;
    margin-right : 5%;      
}
.div-backbottom {
    width: 90%;
    height: 5%;
    background-color: #D8E4F8;
    margin: 70% 0 0 0;
    text-align: center;
    position : absolute;
    margin-left : 5%;
    margin-right : 5%;  
}

.div-main{
    width: 70%;
    height: 85%;
    background-color: #FFFFFF;
    margin-left : 10%;
    margin-right : 10%;
    text-align: center;
    z-index : 2;
    border : thin solid Black;
    position : absolute;
    margin-top : 5%; 
    border-radius: 5px;
}

我可以使用margin-top : -800px;获得浮动效果，但这是一个很好的解决方案。我也无法让后者居中。这只能用CSS吗？我应该看看js解决方案吗？

谢谢，利

Answer 1

z-index 仅适用于位置relative, absolute & fixed。写得像这样：

    .div-backtop,
    .div-backbottom,
    .div-main{
     position:relative;
    }
   .div-backtop{
     z-index:1;
    }
   .div-main{
     z-index:2;
   }

Answer 2

要使用z-index，必须对每个div使用position absolute，因为相对位置不支持z-index

Answer 3

请确保输出结果如何？我无法如何为你的问题做出答案......据我所知，我给出了一个解决方案..希望你能从中得到这个

margin-top : -700px;
    position:relative;

请在此

进行更改

.div-main{
    width: 70%;
    height: 85%;
    background-color: #FFFFFF;
    margin-left : 10%;
    z-index : 5;
    border : thin solid Black;
    position : relativ;
    margin-top : -700px;
    border-radius: 5px;
}

div仅在css上浮动在其他div之上

3 个答案: