TypeScript基础使用方法

position 是一个 CSS 属性，用于控制元素的定位方式。它可以设置以下几个值：

1. static：默认值，元素按照正常的文档流进行布局，不进行定位。
2. relative：相对定位，元素会相对于其正常位置进行偏移，但仍然占据原来的空间。
3. absolute：绝对定位，元素会脱离正常文档流，相对于其最近的非静态定位的父元素或根元素进行定位。
4. fixed：固定定位，元素会脱离正常文档流，相对于浏览器窗口进行定位，不会随页面滚动而变化。
5. sticky：粘性定位，元素在滚动到特定位置时会固定在屏幕上，类似于相对定位和固定定位的结合。

通过设置 position 属性，可以对元素进行灵活的布局和定位，以满足页面设计的需求。

最容易混淆的是相对定位（relative）和绝对定位(absolute) 

 我们以微信小程序的d代码进行示例

html

<view class="box11"></view>
<view class="container1">
  <view class="box box1"></view>
  <view class="box box2"></view>
</view>

css

/* pages/singerDetail/singerDetail.wxss */
.box11{
    width: 100px;
    height: 100px;
    background-color:#241e1e ;
}
.container1 {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #b3da48;
  }
  
  .box {
    width: 50px;
    height: 50px;
  }
  
  .box1 {
    background-color: red;
  }
  
  .box2 {
    background-color: blue;
    position: absolute;
    top: 10px;
    left: 10px;
  }

效果

/* pages/singerDetail/singerDetail.wxss */
.box11{
    width: 100px;
    height: 100px;
    background-color:#241e1e ;
}
.container1 {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #b3da48;
  }
  
  .box {
    width: 50px;
    height: 50px;
  }
  
  .box1 {
    background-color: red;
  }
  
  .box2 {
    background-color: blue;
    position: relative;
    top: 10px;
    left: 10px;
  }

效果

 总结：

1、父元素如果是相对位置（relativ）,其子元素还是默认值static，而不是继承

2、relative在不适用top,bottom,left,right的时候，和不用时的效果一样，但使用之后，是相对于兄弟元素进行偏移

3、obsolute是相对于父元素进行偏移，如果在不设置top、bottom、left、right、的情况下如果有多个子元素会重合