0

我环顾四周寻找解决方案，似乎有一些解决方案，但我似乎没有让它工作，任何想法将不胜感激。

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

下面的 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解决方案吗？

谢谢，李

4

3 回答 3

1

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

    .div-backtop,
    .div-backbottom,
    .div-main{
     position:relative;
    }
   .div-backtop{
     z-index:1;
    }
   .div-main{
     z-index:2;
   }
于 2012-06-13T05:24:47.080 回答
1

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

于 2012-06-13T05:37:53.530 回答
0

请确定输出如何？我无法为您的问题提供答案...据我所知，我给出了一个解决方案..希望您能从中得到

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;
}
于 2012-06-13T05:30:55.937 回答