css - 仅使用 css float 在其他 div 之上的 div

Question

我四处寻找解决方案，似乎有一些解决方案，但我似乎没有让它发挥作用，任何想法都将不胜感激。

我将三个 div 放入一个 div 容器(居中)用作背景 (z-index : -10;)。我想在之前的 div 之上 float 另一个 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; 获得 float 效果，但这是一个 rubish 解决方案。我也无法让后者居中。这可能仅适用于 CSS 吗？我应该看看 js 解决方案吗？

谢谢， 李

Answer 1

z-index 仅适用于位置相对、绝对和固定。这样写:

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