CSS子元素无法置于父元素上方并右移的技术求助

你的问题根源有两点：

• 父元素.card-center设置了overflow: hidden，会直接裁剪所有超出父元素边界的子元素，导致偏移后的蓝色卡片超出部分被隐藏。
• 当前蓝色卡片的定位值仅让它在父元素内部居中靠右，未设置超出父元素的偏移量。

方案一：移除父元素溢出裁剪（简单直接） #

直接去掉.card-center的overflow: hidden属性，调整蓝色卡片的定位值让它向右上方超出父元素：

body {
  font-family: sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

.card-top {
  width: 70%;
  height: 10px;
  background-color: red;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.card-center {
  width: 90%;
  height: 300px;
  background-color: #fff;
  border-radius: 20px;
  position: relative;
  /* 移除overflow:hidden，允许子元素超出显示 */
  border-style: solid;
  border-color: #FF9696;
  padding: 20px;
}

.card-center::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: red;
  z-index: -1;
  /*opacity: 0.2;*/
}

.card-center-left {
  width: 50px;
  height: 150px;
  background-color: pink;
  position: absolute;
  left: 0;
  top: 50%;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  transform: translateY(-50%);
}

.card-center-right {
  width: 50px;
  height: 100px;
  background-color: blue;
  position: absolute;
  right: -25px; /* 向右偏移25px，超出父元素一半宽度 */
  top: -25px; /* 向上偏移25px，让卡片顶部超出父元素 */
  z-index: 999;
}

.card-bottom {
  width: 70%;
  height: 10px;
  background-color: red;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

方案二：保留父元素溢出裁剪（适合需隐藏其他溢出内容的场景） #

如果必须保留.card-center的overflow: hidden，可以把蓝色卡片移到父元素外面，给父元素套一个容器并设置position: relative，让蓝色卡片相对于这个容器定位：

修改后的HTML #

<div class="card-top"></div>

<!-- 新增容器包裹父卡片和蓝色卡片 -->
<div class="card-container">
  <div class="card-center">
    <div class="card-center-left"></div>
    <p>SAMPLE TEXT</p>
  </div>
  <div class="card-center-right"></div>
</div>

<div class="card-bottom"></div>

修改后的CSS #

body {
  font-family: sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

.card-top {
  width: 70%;
  height: 10px;
  background-color: red;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

/* 新增容器，设置relative作为蓝色卡片的定位参考 */
.card-container {
  position: relative;
  width: 90%;
  margin: 0 auto;
}

.card-center {
  width: 100%;
  height: 300px;
  background-color: #fff;
  border-radius: 20px;
  position: relative;
  overflow: hidden; /* 保留溢出裁剪 */
  border-style: solid;
  border-color: #FF9696;
  padding: 20px;
}

.card-center::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: red;
  z-index: -1;
  /*opacity: 0.2;*/
}

.card-center-left {
  width: 50px;
  height: 150px;
  background-color: pink;
  position: absolute;
  left: 0;
  top: 50%;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  transform: translateY(-50%);
}

.card-center-right {
  width: 50px;
  height: 100px;
  background-color: blue;
  position: absolute;
  right: -25px; /* 相对于容器向右偏移 */
  top: -25px; /* 相对于容器向上偏移 */
  z-index: 999;
}

.card-bottom {
  width: 70%;
  height: 10px;
  background-color: red;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

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