Micro-channel applet Detailed position location position relative positioning relative, absolute positioning absolute related issues

First, the position of the position [positioning properties: static, relative, absolute, fixed , inherit, -ms-page, initial, unset ]
1.static: normal generating element block, block-level elements generate a rectangular box, as a part of the document stream, inline elements will create one or more line box, placed in its parent element.
2.relative: [offset with respect to position itself in a stream of frame element] offset a certain distance. Throw maintain the shape of the element is not positioned in front of it, the space it had occupied throw reserved.
3.absolute: [relative to the parent element - provided that the position of the parent element is determined by the frame element] removed from the document stream and is positioned with respect to its containing block, comprising a fast may be another element in the document initially contained or Piece. Original elements in the normal flow of the document space occupied will be closed, as if the elements of the original does not exist. Generating a block-level element positioned after the frame, regardless of what type of frame it had generated in the normal stream.
4.fixed: element frame is similar to the performance position is set to absolute, but which is comprising block window itself.
5.inherit: Inheritance position location of the parent element. - any version of IE support the property value: the inherit
6. The MS-Page-: absolute location depends on the mode.
7.initial: The value of the specified attribute is expressed as an initial value.
8.unset: Set up "inherit" and "initial", according to whether the inherited property.

[Position defining elements is not static, the position may be used] top, right, bottom, left (value: auto / direct numerical / percentage)

Example:

<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 Code:

.imgbox { 
   width : 100% ; 
   height : 100% ; 
   column-COUNT : . 3 ; // displayed as three 
   column-GAP : 5rpx ; size of the gap between the row and column @
 } 

.imgline { 
   width : 100% ; 
   position : relative ; // relative positioning, absolute child elements take effect
 } 

.cancelI { 
   position : absolute ; // fixed position location of the parent element, this absolute positioning to take effect 
   right : 2px ; // located on the right side of the parent element 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 ; // ensure two lines of text in the text centered in the horizontal and vertical
   height-Line : 25px ; // may be used: the display : Flex ; Flex-direction : column ; align = left-items : Center ; The justify-Content : Center ; [text horizontal text, vertically centered]
 } 

Image { 
   width : 100 % ; 
   height : 250rpx ; 
   margin-Top : 5px ; 
}

 

Display of results: 

 

 

 

 

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