html - 将一个 div 元素均匀地覆盖在另外两个元素之上

Question

在当前的实现中，当页面调整大小时或在移动 View 中，圆形元素会在页面上移动。我需要将圆圈永久固定在绿色和白色 div 元素之间。

.circle {
  border-radius: 50%;
  background-color: white;
  border: 4px solid pink;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 46%;
  vertical-align: middle;
  top: 26px;
  z-index: 999;
}

.green {
  width: 100%;
  position: relative;
  background-color: green;
  padding: 20px;
}

.white {
  width: 100%;
  background-color: white;
  position: relative;
  padding: 20px;
}

<div>
  <div class="green"></div>
  <div class="circle"></div>
  <div class="white"></div>
<div>

Answer 1

我建议将圆移到绿色部分内并对齐到底部，或者使用::after。这种方法保证圆总是居中。 这里我使用了 `::after' 因为空元素不好，为此目的存在伪元素。

* {
box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
.green {
  width: 100%;
  position: relative;
  background-color: green;
  padding: 20px 20px 40px;
}
.green::after {
  content: '';
  display: block;
  border-radius: 50%;
  background-color: white;
  border: 4px solid pink;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate3d(-50%, 50%, 0);
  z-index: 100;
}

.white {
  width: 100%;
  background-color: white;
  position: relative;
  padding: 40px 20px 20px;
}

<div>
  <div class="green">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="white">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div>