能否混合fixed/relative定位？容器内fixed元素如何相对容器固定？

首先明确：CSS里的position: fixed本来就是相对于浏览器视口定位的，没法直接让它相对于父级容器固定——这是规范定义的行为。你之前看到的"fixed relative to container"相关方案，大多是利用transform创建新包含块的技巧，但这种方式有明显局限性，而且你代码里没生效，是因为fixed的top/right值还是基于视口计算，不是容器。

给你两个实用的替代方案：

方案一：position: absolute（容器无需滚动时） #

把粉色div的position改成absolute，父容器保持position: relative，就能让粉色块相对于父容器定位：

<div style="width: 100%; height: 200px; background-color: #ddd; padding: 10px; position: relative">
  <div style="position: absolute; top: 20px; right: 20px; background-color: pink; padding: 3px; border: 1px solid gray">Blah!</div>
  gygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghj
</div>

方案二：position: sticky（容器需要滚动时） #

如果父容器开启了overflow: auto滚动，想让粉色块始终固定在容器右上角，用sticky更合适：

<div style="width: 100%; height: 200px; background-color: #ddd; overflow: auto; padding: 10px; position: relative">
  <div style="position: sticky; top: 20px; right: 20px; background-color: pink; padding: 3px; border: 1px solid gray; margin-left: auto; display: block;">Blah!</div>
  gygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghj
</div>

注意：sticky必须配合top/right/bottom/left中至少一个属性才能生效，且父容器不能设置overflow: hidden（overflow: auto没问题）。

至于你之前试的transform方案，虽然能让fixed相对于容器定位，但需要手动计算fixed的偏移值，灵活性极差，还可能引发兼容性问题，完全没必要用。

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