我想实现这种情况:
该页面总共包含 4 个 div。主层分为 3 个 div。 在 div1 和 div2 上方,另一个 div(div4) 必须 float 在这 2 个 div 的中间。
当前代码:
body {
position:relative;
}
div1 {
// nothing
}
div2 {
// nothing
}
div3 {
// nothing
}
div4 {
z-index: 10;
position: absolute;
top: 550px;
left: 0;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 50px;
}
如果有人能给我提示,我将不胜感激。
提前致谢!
最佳答案
如果您的问题只是如何获得该布局,这可以提供帮助:
* {
margin: 0
}
html,
body {
height: 100%;
}
div {
height: 33.3%;
}
.one {
background: red;
}
.two {
background: green;
}
.three {
background: blue;
}
.four {
position: absolute;
background: yellow;
top: 17%;
left: 30%;
width: 40%;
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
但这只是视觉框,如果您有更多要求可能会有点棘手。
关于html - 将一个 div 置于另外两个 div 之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28196741/