position.uvue 3.9 KB
Newer Older
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
1
<template>
DCloud-WZF's avatar
DCloud-WZF 已提交
2 3 4 5 6 7 8
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view style="flex-grow: 1">
      <view>
        <text>position: relative</text>
        <scroll-view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
9
          style="width: 250px; height: 250px; background-color: gray"
DCloud-WZF's avatar
DCloud-WZF 已提交
10 11
        >
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
12
            style="width: 50px; height: 50px; background-color: red"
DCloud-WZF's avatar
DCloud-WZF 已提交
13 14
          ></view>
          <view class="common" style="position: relative">
15
            <text class="text">relative</text>
DCloud-WZF's avatar
DCloud-WZF 已提交
16 17
          </view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
18
            style="width: 50px; height: 50px; background-color: blue"
DCloud-WZF's avatar
DCloud-WZF 已提交
19 20
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
21
            style="width: 50px; height: 50px; background-color: red"
DCloud-WZF's avatar
DCloud-WZF 已提交
22 23
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
24
            style="width: 50px; height: 50px; background-color: green"
DCloud-WZF's avatar
DCloud-WZF 已提交
25 26
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
27
            style="width: 50px; height: 50px; background-color: blue"
DCloud-WZF's avatar
DCloud-WZF 已提交
28 29
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
30
            style="width: 50px; height: 50px; background-color: red"
DCloud-WZF's avatar
DCloud-WZF 已提交
31 32
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
33
            style="width: 50px; height: 50px; background-color: green"
DCloud-WZF's avatar
DCloud-WZF 已提交
34 35
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
36
            style="width: 50px; height: 50px; background-color: blue"
DCloud-WZF's avatar
DCloud-WZF 已提交
37 38 39
          ></view>
        </scroll-view>
      </view>
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
40

DCloud-WZF's avatar
DCloud-WZF 已提交
41 42 43
      <view>
        <text>position: absolute</text>
        <scroll-view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
44
          style="width: 250px; height: 250px; background-color: gray"
DCloud-WZF's avatar
DCloud-WZF 已提交
45 46
        >
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
47
            style="width: 50px; height: 50px; background-color: red"
DCloud-WZF's avatar
DCloud-WZF 已提交
48 49
          ></view>
          <view class="common" style="position: absolute">
50
            <text class="text">absolute</text>
DCloud-WZF's avatar
DCloud-WZF 已提交
51 52
          </view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
53
            style="width: 50px; height: 50px; background-color: blue"
DCloud-WZF's avatar
DCloud-WZF 已提交
54 55
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
56
            style="width: 50px; height: 50px; background-color: red"
DCloud-WZF's avatar
DCloud-WZF 已提交
57 58
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
59
            style="width: 50px; height: 50px; background-color: green"
DCloud-WZF's avatar
DCloud-WZF 已提交
60 61
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
62
            style="width: 50px; height: 50px; background-color: blue"
DCloud-WZF's avatar
DCloud-WZF 已提交
63 64
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
65
            style="width: 50px; height: 50px; background-color: red"
DCloud-WZF's avatar
DCloud-WZF 已提交
66 67
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
68
            style="width: 50px; height: 50px; background-color: green"
DCloud-WZF's avatar
DCloud-WZF 已提交
69 70
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
71
            style="width: 50px; height: 50px; background-color: blue"
DCloud-WZF's avatar
DCloud-WZF 已提交
72 73 74
          ></view>
        </scroll-view>
      </view>
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
75

DCloud-WZF's avatar
DCloud-WZF 已提交
76 77 78
      <view>
        <text>position: fixed</text>
        <scroll-view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
79
          style="width: 250px; height: 250px; background-color: gray"
DCloud-WZF's avatar
DCloud-WZF 已提交
80 81
        >
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
82
            style="width: 50px; height: 50px; background-color: red"
DCloud-WZF's avatar
DCloud-WZF 已提交
83
          ></view>
84
          <view class="common fixed" style="position: fixed">
85
            <text class="text">fixed</text>
DCloud-WZF's avatar
DCloud-WZF 已提交
86 87
          </view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
88
            style="width: 50px; height: 50px; background-color: blue"
DCloud-WZF's avatar
DCloud-WZF 已提交
89 90
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
91
            style="width: 50px; height: 50px; background-color: red"
DCloud-WZF's avatar
DCloud-WZF 已提交
92 93
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
94
            style="width: 50px; height: 50px; background-color: green"
DCloud-WZF's avatar
DCloud-WZF 已提交
95 96
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
97
            style="width: 50px; height: 50px; background-color: blue"
DCloud-WZF's avatar
DCloud-WZF 已提交
98 99
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
100
            style="width: 50px; height: 50px; background-color: red"
DCloud-WZF's avatar
DCloud-WZF 已提交
101 102
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
103
            style="width: 50px; height: 50px; background-color: green"
DCloud-WZF's avatar
DCloud-WZF 已提交
104 105
          ></view>
          <view
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
106
            style="width: 50px; height: 50px; background-color: blue"
DCloud-WZF's avatar
DCloud-WZF 已提交
107 108 109 110 111 112 113
          ></view>
        </scroll-view>
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
114

DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
115 116 117
</template>

<style>
DCloud-WZF's avatar
DCloud-WZF 已提交
118
.common {
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
119 120
  width: 50px;
  height: 50px;
DCloud-WZF's avatar
DCloud-WZF 已提交
121
  background-color: green;
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
122 123
  top: 25px;
  left: 25px;
DCloud-WZF's avatar
DCloud-WZF 已提交
124 125 126
  justify-content: center;
  align-items: center;
}
127 128 129 130 131 132 133

.fixed {
  /* #ifdef H5*/
  top:  calc(var(--window-top) + 25px);
  /* #endif */
}

134 135 136 137
.text {
  white-space: nowrap;
  width: 100%;
}
DCloud-WZF's avatar
DCloud-WZF 已提交
138
</style>