微信小程序 位置定位position詳解，相對定位relative，絕對定位absolute相關問題

一、位置position【定位屬性：static，relative，absolute，fixed，inherit，-ms-page，initial，unset】
1.static：元素框正常生成，塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或者多個行框，置於其父元素中。
2.relative：【相對於自己本身在流中的位置的偏移】元素框偏移某個距離。元素扔保持其未定位前的形狀，它原來所占的空間扔保留。
3.absolute：【相對於父元素 —— 前提是父元素的位置是確定的】元素框從文檔流中刪除，並相對於其包含塊定位，包含快可能是文檔中的另一個元素或者初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
4.fixed：元素框的表現類似於將position 設置為absolute，不過其包含塊是視窗本身。
5.inherit：繼承父元素的position位置。—-任何版本的IE都不支持屬性值：inherit
6.-ms-page:位置取決於absolute的模式。
7.initial：將指定的值表示為屬性的初始值。
8.unset：設置了“inherit”和“initial”，根據屬性是否被繼承。

【定義position不為static的元素時，可以使用位置】top，right，bottom，left（取值：auto／直接數值／百分比）

示例：

<view class='imgbox'>
      <view class='imgline' wx:for="{{imgs}}" wx:for-item="i">
         <image bindtap='tapImg' src='{{i.path}}' data-id='{{index}}'></image>
         <icon type='cancel' bindtap='tapCancel' color='red' size='20' class='cancelI' data-id='{{index}}'></icon>
         <text class='item_txt' data-id='{{index}}' bindtap='tapAddLabel'>{{i.label}}</text>
      </view>
</view>

wxss代碼：

.imgbox {
   width: 100%;
   height: 100%;
   column-count: 3;//顯示為3列
   column-gap: 5rpx;//列與列之間間隙大小
}

.imgline {
   width: 100%;
   position: relative;//相對定位，子元素的absolute才能生效
}

.cancelI {
   position: absolute;//父元素的position位置固定，這個絕對定位才會生效
   right: 2px;//位於父元素的右邊 2px
   left: auto;
   top: 10px;
}

.item_txt {
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
   height: 25px;
   font-size: 13px;
   background-color: #999;
   color: white;
   text-align: center; //這兩行保證文本在text中水平垂直居中
   line-height: 25px; //也可以使用：display:flex;flex-direction:column;align-items:center;justify-content:center;[文字在text中水平，垂直居中]
}

image {
   width: 100%;
   height: 250rpx;
   margin-top: 5px;
}

 

展示效果： 

 

 

 

 

轉: https://blog.csdn.net/yingtian648/article/details/80047949