CSS重叠多个div

【问题标题】：CSS overlap multiple divsCSS重叠多个div
【发布时间】：2018-02-01 19:20:45
【问题描述】：

你好！我想用一个圆形 div 来完成这个。我知道如何在 1 个 div 中使用绝对和相对来完成定位，但是如果我想用两个 div 制作它并使圆圈与这两个 div 重叠，那么在 CSS 中有什么简单/智能的方法吗？

【问题讨论】：

你能把你的 HTML 和 CSS 贴在这里，让我们看看你到目前为止所做的尝试吗？
您是要排列两个半圆，还是将一整圆放在 div 的中心点？
我正在尝试将整个圆圈定位在 div 的中心点

【解决方案1】：

希望对你有帮助

body {
  margin: 0px;
}

.top,
.bottom {
  width: 100%;
  height: 100px;
}

.top {
  background: red;
}

.bottom {
  background: black;
}

.circle {
  background: green;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 50vh;
}

<div class="top"></div>
<div class="bottom"></div>
<div class="circle"></div>

【讨论】：