Question

如何使绿色div环绕蓝色和黄色div（他的孩子）在这个特殊的问题：

HTML

<div id="main">
    <div id="one"></div>
    <div id="two"></div>
</div>
<div id="footer"></div>

CSS

#main {
    width: 100%;
    background-color: green;
    z-index: -2;
    position: relative;
    margin-bottom: 10px;
}

#one {
    width: 100%;
    height: 150px;
    background-color: blue;
    position: absolute;
    z-index:-1;
}

#two {
    position: relative;
    top: 100px;
    z-index:3;
    width: 300px;
    height: 500px;
    background-color: yellow;
    margin: 0px auto;
}

Answer 1

绿色div围绕着蓝色div。它只是没有出现，因为蓝色div位于顶部。

使用div #two，您可以相对于前100px进行相对定位。当您定位某些相对的东西时，您将相对于它自然落入浏览器的位置移动div的可视组件。这相当于说＆＃34;视觉上从你所在的位置下移150px＆＃34;。你可以让绿色更高，但我不认为这是你想要的。

我认为你要做的事情（如果我错了请纠正我），是这样的： https://jsfiddle.net/dk6L1zLL/

＆＃13;

#main {
    width: 100%;
    background-color: green;
    z-index: -2;
    position: relative;
    margin-bottom: 10px;
    padding-top:10px;
    padding-bottom:10px;
}

#one {
    //width: 100%;
    height: 150px;
    background-color: blue;
    //position: absolute;
    z-index:-1;
    margin:0 10px 0;
}

#two {
    //position: relative;
    //top: 100px;
    z-index:3;
    width: 300px;
    height: 500px;
    background-color: yellow;
    margin: 0px auto;
    /*margin-bottom: 500px;*/
}

#footer {
    height: 100px;
    background-color: red;
    width: 100%;
    position: relative;
    z-index: -3;
}

＆＃13;

<body>
    <div id="main">
        <div id="one"></div>
        <div id="two"></div>
    </div>
    <div id="footer"></div>
</body>

＆＃13;

我摆脱了很多定位规则并添加了一些边距和填充。

环绕位置：相对

1 个答案: