微信小程序 位置定位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

扫描二维码关注公众号，回复： 6624903 查看本文章