如何实现一个div覆盖另一个div？及圆形半置于矩形内外的效果？

嘿，针对你的两个CSS布局问题，我来分享下实用的解决方案：

问题1：如何让一个div覆盖另一个div？ #

最常用且可控的方案是利用**CSS定位（position）**结合z-index实现，具体步骤如下：

• 给被覆盖的底层div设置position: relative，让它成为绝对定位元素的参考容器
• 给需要覆盖的上层div设置position: absolute，再通过top: 0; left: 0; right: 0; bottom: 0;让它完全铺满底层div的范围
• 用z-index属性控制层级，确保上层div的z-index值大于底层div（默认z-index为auto，设置正数即可）

举个直观的代码示例：

<div class="bottom-div">我是底层div</div>
<div class="top-div">我是覆盖的半透明div</div>

.bottom-div {
  position: relative;
  width: 300px;
  height: 200px;
  background: #f0f0f0;
  padding: 10px;
}

.top-div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 0, 0, 0.4);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

如果两个div是兄弟关系，也可以不给底层div设relative，直接给上层div设absolute后调整位置，但用relative做参考容器能避免影响页面其他元素的布局，更推荐这种方式。

问题2：让circle一半在rectangle内、一半在外，延伸至rectangle末端 #

这个需求的核心是让圆形的中心对齐矩形的右边缘，这样自然就能实现一半在里一半在外的效果，具体实现：

• 给矩形设置position: relative，作为圆形的定位参考
• 圆形设置position: absolute，通过right: -[圆形半径]让中心对齐矩形右边缘（比如圆形宽高50px，半径就是25px，所以right: -25px）
• 用top: 50%; transform: translateY(-50%)让圆形在垂直方向和矩形居中对齐
• 矩形默认overflow: visible，不用额外设置，这样圆形超出的部分不会被裁剪

代码示例：

<div class="rectangle">我是矩形容器</div>
<div class="circle"></div>

.rectangle {
  position: relative;
  width: 300px;
  height: 100px;
  background: #42b983;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.circle {
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ff7f50;
}

如果圆形大小需要动态调整，可以用CSS变量简化维护：

:root {
  --circle-size: 50px;
}

.rectangle {
  position: relative;
  width: 300px;
  height: 100px;
  background: #42b983;
}

.circle {
  position: absolute;
  right: calc(var(--circle-size) / -2);
  top: 50%;
  transform: translateY(-50%);
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  background: #ff7f50;
}

内容的提问来源于stack exchange，提问作者Roel Voordendag