css fixed 相对父元素

/* 示例代码：使子元素相对父元素固定定位 */

/* 父元素需要设置 position: relative */
.parent {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: lightblue;
}

/* 子元素使用 fixed 定位，但是 fixed 是相对于视口的，不是父元素 */
/* 如果要实现类似效果，可以使用 position: absolute */
.child {
  position: absolute; /* 使用 absolute 而不是 fixed */
  top: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  background-color: lightcoral;
}

解释说明：

• position: fixed 是相对于视口（浏览器窗口）进行定位的，而不是相对于父元素。因此，如果你想让子元素相对于父元素进行固定定位，应该使用 position: absolute。
• 父元素需要设置 position: relative，这样子元素的 position: absolute 才会相对于父元素进行定位。
• 在上面的示例中，.child 元素会相对于 .parent 元素进行定位，并且保持在父元素的右上角位置。

如果你确实需要 fixed 定位的效果，但又希望它相对于某个父元素，CSS 目前无法直接实现这一点。你需要通过 JavaScript 或其他方式来模拟这种效果。