微信小程序 - view覆盖_view postion 两个遮盖

挺常见的功能，因首次开发微信小程序，故此做一波记录 ~

最终效果：view覆盖

主要属性

  //1.position 		
  //2.z-index
  //父布局
  position: relative;
  //子布局
  position: absolute;
  //view层级顺序 → 数值越高就离用户越近
  z-index: 1;
1
2
3
4
5
6
7
8

实现步骤

父布局（最外层布局）

• 效果：单一父布局
  
• 主要属性

 position: relative;
 z-index: 1;
1
2

• 全部属性

.parent_style {
  background-color: #501370;
  height: 50rpx;
  position: relative;
  width: 100%;
  z-index: 1;
}
1
2
3
4
5
6
7

子布局

注意

1. 覆盖view的效果，主要基于俩个子View之间，所以下方我们有俩个子view
2. 通过 z-index 属性，控制view的显示层级

子view1

• 效果：父布局 + 1个子布局
  
• 主要属性

position: absolute;
z-index: 2;
1
2

• 全部属性

.big_son_style {
  color: #fff;
  background-color: #73b939;
  font-size: 28rpx;
  height: 100%;
  position: absolute;
  z-index: 2;
}
1
2
3
4
5
6
7
8

子view2

• 效果： 最终效果：view覆盖
  
• 主要属性

 position: absolute;
 z-index: 3;
1
2

• 全部属性

.small_son_style {
  color: #fff;
  background-color: #f00;
  font-size: 28rpx;
  height: 100%;
  position: absolute;
  z-index: 3;
}
1
2
3
4
5
6
7
8

完整代码

.wxml

 <view class='parent_style'>
    <text class='big_son_style'>你觉得女人都是蛮不讲理的吗？</text>
    <text class='small_son_style'>我觉得是...</text>
  </view>
1
2
3
4

.wxss

.parent_style {
  background-color: #501370;
  height: 50rpx;
  position: relative;
  width: 100%;
  z-index: 1;
}

.big_son_style {
  color: #fff;
  background-color: #73b939;
  font-size: 28rpx;
  height: 100%;
  position: absolute;
  z-index: 2;
}

.small_son_style {
  color: #fff;
  background-color: #f00;
  font-size: 28rpx;
  height: 100%;
  position: absolute;
  z-index: 3;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25