小程序层级————(2020.1.27学习笔记）

有时候在开发中，我们会希望一个组件显示在另一个组件的上面（效果如下图）

而要实现这种效果，必须在wxss中设置组件的z-index,也就是设置组件的层级，拿效果图做例子，效果图中，定位图标在灰色背景图上，要实现这个效果，必须设置灰色背景图z-index为-1，然后设置定位图标z-index为1，因为z-index比背景图大，所以图标会显示在背景图之上，（代码如下）
wxml的代码

<view class="Weather_Header">
   <image src="{{Weather_Image_Src}}" mode="widthFix">
   </image>
   <view class="Weather_Header_Position">
      <image src="/My_Image/Other_Image/Position_Icon.png"></image>
      <text>{{Weather_Title}}</text>
   </view>
   </view>

wxss的代码

/* pages/Page_Weather/Page_Weather.wxss */
.Weather_Header{
  display: flex;
  position:absolute;
  z-index: -1;
  flex-direction: row;
  justify-content: center;
  
  width: 100%;
 
}
.Weather_Header image{
  width: 100%;
}
.Weather_Header_Position{
  position:absolute;
  z-index: 1;
  margin-top: 80rpx;
 display: flex;
 align-items: center;
  
}
.Weather_Header_Position Image{
   width: 38rpx;
   height: 38rpx;
  
  
}
.Weather_Header_Position text{
  font-family: SimHei;
  font-weight: 700;
  
}