Question

好的我正在尝试建立一个网站设计。我需要做的是有两个彩色背景div，然后在它们前面漂浮一个白色的盒子。我已经使用z-index 0作为背景块，然后使用z-index 5作为我想要浮动的块。我也用过position：relative。有谁知道为什么这不起作用。这是我的代码：

HTML：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div id="page">
        <div id="grey_block_left"></div>
        <div id="purple_block_right"></div> 
        <div id="white_box_outer">
            float on top
        </div>
        <div id="footer">

        </div>
    </div>
</body>
</html>

CSS：

@charset "utf-8";
*
{
    list-style: none;
    text-decoration:none;
    padding: 0;
    margin: 0;
}
html
{
    margin: 0 auto;
    width: 100%;
    min-width: 320px;
}
body 
{
    margin: 0;
    padding: 0;
}
#page
{
    width: 100%;
    position: relative;
    z-index: 0;
}
#grey_block_left
{
    width: 40%;
    background-color: #333333;
    min-height: 700px;
    float: left;
    position: relative;
    z-index: 0;
}
#purple_block_right
{
    width: 60%;
    background-color: #9966cc;
    min-height: 700px;
    float: left;
    position: relative;
    z-index: 0;
}
#footer
{
    width: 100%;
    background-color: #111111;
    min-height: 250px;
    float: left;
    position: relative;
    z-index: 0;
}
#white_box_outer
{
    width: 70%;
    min-height: 450px;
    margin-left: 200px;
    position: relative;
    z-index: 5;
    float: left;
    background-color: #ccc; 
}

Answer 1

#white_box_outer
{
width: 70%;
min-height: 450px;
margin-left: 200px;
position: absolute;
float: left;
background-color: #ccc;
}

将white_box位置设置为绝对位置，然后根据您的目标调整其高度和宽度。

将div除了不与z-index一起使用的其他div

1 个答案: