position定位

position属性指定了元素的定位类型，含有五个值，分别是：static、relative、fixed、absolute、sticky
元素可以使用的top、bottom、left、right属性定位。然而，这些属性无法工作，除非是先设定position属性。

1、static定位（静态定位）

html元素的默认值，即没有定位，遵循正常的文档流对象，
静态定位的元素不会受到top、bottom、left、right的影响。

eg：

<view class="position-static">
    static
</view>
.position-static {
    /*
    position: static 定位，html元素的默认值，即没有定位，遵循正常的文档流对象.静态定位的元素不会受到top,bottom,left,right影响
    */
    position: static;
    background-color: pink;
    padding: 20rpx;
    top: 200rpx;
}

2、fixed定位（固定定位）

相对于窗口固定位置，不会随着屏幕滑动而移动位置，top,bottom,left,right属性都指屏幕到属性的位置
注意：fixed定位使元素与文档流无关，因此不会占据空间，fixed定位的元素和其他元素会重叠

eg：

<view class="position-fixed">
我是固定的
</view>
.position-fixed {
    /**
    * 相对于窗口固定位置，不会随着屏幕滑动而移动位置，top,bottom,left,right属性都指屏幕到属性的位置
    */
    position: fixed;
    padding: 20rpx;
    top: 200rpx;
    background-color: antiquewhite;
}

3、relative定位（相对定位）

相对定位元素的定位是相对其正常位置,移动相对定位元素，但它原本所占的空间不会改变,相对定位元素经常被用来作为绝对定位元素的容器块
注意：移动相对定位元素，但它原本所占据的空间不会改变

eg：

<view class="position-relative">
    我是相对定位
</view>
.position-relative {
    /**
    * 相对定位元素的定位是相对其正常位置,移动相对定位元素，但它原本所占的空间不会改变,相对定位元素经常被用来作为绝对定位元素的容器块
    */
    position: relative;
    top: 20rpx;
    background-color: cadetblue;
    padding: 20rpx;
    height: 2000rpx;
}

4、absolute定位（绝对定位）

绝对定位的元素的位置相对于最近的已定位的父元素，如果元素没有已定位的父元素，那么它的位置会相对于
注意：absolute定位使元素的位置和文档流无关，因此不会占据空间，定位的元素会与其他元素重叠

eg：

<view class="parent-nearest">
    <view class="children-one">children-one</view>
    <view class="position-absolute">
    我是绝对定位
    </view>
</view>
 
.parent-nearest {
    background-color: orange;
    height: 500rpx;
    top: 20rpx;
    position: relative;
}
    
.position-absolute {
    padding: 20rpx;
    background-color: #CEB9E5;
    position: absolute;
    top: 20rpx;
    bottom: 20rpx;
}

5、sticky定位（粘性定位）

粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间切换。
它的行为就像position:relative，当页面滚动超出目标区域，它的表现就像position:fixed；会固定在目标位置;必须指定top、bottom、left、right之一的值，不然粘性定位不起效果，就会和相对定位的行为一样。

eg：

<view class="position-sticky">
    <view class="sticky">我是粘性定位</view>
    <view style="padding-bottom:2000px">
        <p>滚动1</p>
        <p>滚动2</p>
        <p>滚动3</p>
        <p>滚动4</p>
        <p>滚动5</p>
        <p>滚动6</p>
    </view>
</view>
 
.position-sticky {
    .sticky {
        /**
         * 粘性定位，主要依赖用户的滚动行为，在 position:relative 与 position:fixed 定位之间切换，必须指定top、bottom、left、right之一的值，不然粘性定位不起效果，就会和相对定位的行为一样
         */
        position: sticky;
        top: 0;
        padding: 5px;
        background-color: #cae8ca;
        border: 2px solid #4CAF50;
    }
}