absolute 绝对定位 的理解

WeChat93b0ab735a0c5f299483df5c3d9a0393.jpg

今天在做项目的时候发现这种情况:
正常情况下应该是:

WeChat3ea3ca5b88b115791d03691836797730.jpg

发现了没, 数量加减的控件偏移了,我去,什么情况.
后来排查发现,是因为设置其加减控件的absolute的参照物出现了问题,刚好我们在了解下 absolute

absolute 绝对定位

注意: 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位

1. 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，【完全不占位置】。
2. 可是它具体的位置父类参考物确是相对的.并且有以下规定:

父级没有定位

若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。

子绝父相 < 非常非常重要 >

这句话的意思是 子级是绝对定位的话， 父级要用相对定位。
因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。
父盒子布局时，需要占有位置，因此父亲只能是 相对定位.
这就是子绝父相的由来。

绝对定位的盒子水平/垂直居中 < 相当重要 >

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一个算法。

1. 首先left 50% 父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了

怎么理解上面的,我们做个实验:

<view class="box red">紫红色
       <view class="box1  pink">粉色
           <view class="box2 blue">蓝色
           </view>
       </view>
   </view>
   
   
   .box {
       height: 600rpx;
       width: 600rpx;
       background: rosybrown;
   }

   .box1 {
       width: 500rpx;
       height: 500rpx;     
       background-color: blanchedalmond;
   }

   .box2 {
       width: 200rpx;
       background-color: skyblue; 
   }

三个颜色嵌套, 紫色包含粉色,粉色包含蓝色,如图:

WechatIMG314.jpg

我们将蓝色作为一个 absolute[绝对定位]来测试:

1. 验证父级没有定位, 以浏览器当前屏幕为准对齐(document文档)。

.box {
        height: 600rpx;
        width: 600rpx;
        background: rosybrown;
    }

    .box1 {
        width: 500rpx;
        height: 500rpx;     
        background-color: blanchedalmond;
    }

    .box2 {
        width: 200rpx;
        background-color: skyblue; 
        /* 定位 */
        position: absolute;
        right: 0;
        bottom: 0;
    }

结果图片:

WechatIMG315.jpg

2. 验证 子绝父相

• 将其父类box1(粉色)设置为相对定位,作为参考物

   .box {
       height: 600rpx;
       width: 600rpx;
       background: rosybrown;
   }

   .box1 {
       width: 500rpx;
       height: 500rpx;     
       background-color: blanchedalmond;
       position: relative;
   }

   .box2 {
       width: 200rpx;
       background-color: skyblue; 
       /* 定位 */
       position: absolute;
       right: 0;
       bottom: 0;
   }

WechatIMG316.jpg

• 将其父类box(紫红色)设置为相对定位,作为参考物

  .box {
        height: 600rpx;
        width: 600rpx;
        background: rosybrown;
        position: relative;
    }

    .box1 {
        width: 500rpx;
        height: 500rpx;     
        background-color: blanchedalmond;
    }

    .box2 {
        width: 200rpx;
        background-color: skyblue; 
        /* 定位 */
        position: absolute;
        right: 0;
        bottom: 0;
    }

WechatIMG318.jpg

3. 验证 当父类有多个已定位的,将采取就近原则;

• 若 box1(粉色) 和 box2(蓝色) 都设置为 绝对定位, 那么蓝色的位置会在什么地方

    .box {
        height: 600rpx;
        width: 600rpx;
        background: rosybrown;
        position: relative;
    }

    .box1 {
        width: 500rpx;
        height: 500rpx;     
        background-color: blanchedalmond;
        /* 定位 */
        position: absolute;
        left: 0;
        top: 0;
    }

    .box2 {
        width: 200rpx;
        background-color: skyblue; 
        /* 定位 */
        position: absolute;
        right: 0;
        bottom: 0;
    }

WechatIMG321.jpg

• 若 box(紫红色) 和 box1(粉色) 都设置为 相对定位 , 那么蓝色的位置会在什么地方

    .box {
        height: 600rpx;
        width: 600rpx;
        background: rosybrown;
        position: relative;
    }

    .box1 {
        width: 500rpx;
        height: 500rpx;     
        background-color: blanchedalmond;
        position: relative;
    }

    .box2 {
        width: 200rpx;
        background-color: skyblue; 
        /* 定位 */
        position: absolute;
        right: 0;
        bottom: 0;
    }

WechatIMG319.jpg

验证了绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于窗口为定位

1. 验证 绝对定位的盒子水平/垂直居中的设置

.box {
        height: 600rpx;
        width: 600rpx;
        background: rosybrown;
        position: relative;
    }

    .box1 {
        width: 500rpx;
        height: 500rpx;     
        background-color: blanchedalmond;
    }

    .box2 {
        width: 200rpx;
        background-color: skyblue; 
        /* 定位 */
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 0);
    }

WechatIMG320.jpg