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

Question

在当前的实现中，当页面调整大小或在移动视图中时，圆形元素会在页面上移动。我需要将圆圈永久固定在绿色和白色 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>

标签： htmlcsssass

Answer 1

嗨，如果您需要使圆圈始终在中心水平对齐，无论屏幕大小如何，请使用 transform: translateX(-50%); 左：50%。

对于中间的垂直对齐，使用 transform: translateY(-50%); 和顶部： 50%。

对于中间的水平和垂直对齐，请使用transform: translate(-50%, -50%); 最高：50%；左：50%。

下面的 css for circle 是根据您的要求给出的。希望能帮助到你。

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

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