html - Div 在另一个 div 之上并且彼此相邻

Question

我搜索并找到了类似的案例，但并不完全相同，而且我对 CSS 的理解并不流畅。

我有四个相邻的 div，我需要在每个 div 之上再放置一个 div。我尝试以不同方式设置 width、更改 position、display div，但没有得到正确的结果。

你可以在这里看到我的代码: https://jsfiddle.net/Zmitas/y9kk9kvt/

到目前为止，我设法让它们彼此相邻，但我没有设法修复“台阶”外观。

谢谢大家的回答

Answer 1

更新 css & HTML

#one {
  width: 100%;
  height: 600px;
  background-color: #333;
  float: left;
}
#two {
  width: 100%;
  height: 600px;
  float: left;
  background-color: #666;
}
#three {
  width: 100%;
  height: 600px;
  float: left;
  background-color: #333;
}
#four {
  width: 100%;
  height: 600px;
  background-color: #666;
  float: left;
}
.above {
  position: relative;
  width: 25%;
  float: left;
}

<div class="above">
  <div>text above</div>
  <div id="one">Div one</div>
</div>

<div class="above">
  <div>text above</div>
  <div id="two">Div two</div>
</div>

<div class="above">
  <div>text above</div>
  <div id="three">Div three</div>
</div>

<div class="above">
  <div>text above</div>
  <div id="four">Div four</div>
</div>