将一个 div 置于另外两个 div 之上

Question

我想实现这种情况：

该页面总共包含 4 div。主层 div 在 3 div 秒内完成。在 div1 和 div2 的上方，另一个 div(div4) 必须漂浮在它们上方，在这 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;
}

如果有人能提醒我，我将不胜感激。

提前致谢！

Answer 1

如果您的问题只是如何获得该布局，这会有所帮助：

* {
  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>

但这只是视觉框，如果你有更多的要求可以稍微取一点点。

将一个 div 置于另外两个 div 之上

center one div above two other divs

html

css

css-position