css 相对组件 固定定位

Question

<template>
  <div class="container">
    <div class="box">
      <p>{{text}}</p>
    </div>
    <div class="content">
      123
    </div>
  </div>
</template>

box想要相对container定位，但是container可滚动，box位置也会变化

如果用fixed则是相对屏幕

Answer 1

你需要实现什么效果?

相对于containe定位
然后containe变化 box不随着它变化?

Answer 2

fixed 严格来说并不是相对于屏幕定位。如果祖先元素里有设置 css transform 的元素的话， fixed 的元素会相对于这个 transform 的元素定位。
所以你的这个问题简单的解决方案就是：给 .container 加一个 transform: translate3d(0,0,0)。 前提是如果 .box 到 .container 之间的元素都没有设置 css transform 属性

可以参考这个问题的回答
https://stackoverflow.com/que...

Answer 3

最初box相对container定位，然后container滚动到box的时候让box浮起