position.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view style="flex-grow: 1">
      <view>
        <text>position: relative</text>
        <scroll-view
          style="width: 500rpx; height: 500rpx; background-color: gray"
          scroll-y="true"
        >
          <view
            style="width: 100rpx; height: 100rpx; background-color: red"
          ></view>
          <view class="common" style="position: relative">
            <text>relative</text>
          </view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: blue"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: red"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: green"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: blue"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: red"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: green"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: blue"
          ></view>
        </scroll-view>
      </view>

      <view>
        <text>position: absolute</text>
        <scroll-view
          style="width: 500rpx; height: 500rpx; background-color: gray"
          scroll-y="true"
        >
          <view
            style="width: 100rpx; height: 100rpx; background-color: red"
          ></view>
          <view class="common" style="position: absolute">
            <text>absolute</text>
          </view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: blue"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: red"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: green"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: blue"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: red"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: green"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: blue"
          ></view>
        </scroll-view>
      </view>

      <view>
        <text>position: fixed</text>
        <scroll-view
          style="width: 500rpx; height: 500rpx; background-color: gray"
          scroll-y="true"
        >
          <view
            style="width: 100rpx; height: 100rpx; background-color: red"
          ></view>
          <view class="common" style="position: fixed">
            <text>fixed</text>
          </view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: blue"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: red"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: green"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: blue"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: red"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: green"
          ></view>
          <view
            style="width: 100rpx; height: 100rpx; background-color: blue"
          ></view>
        </scroll-view>
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<style>
.common {
  width: 100rpx;
  height: 100rpx;
  background-color: green;
  top: 50rpx;
  left: 50rpx;
  justify-content: center;
  align-items: center;
}
</style>