前言

WXSS (WeiXin Style Sheets)是微信开发的样式语言，用于描述 WXML 的组件样式，它具有CSS 的大部分特性。关于在定位时常用到的属性position，文档中没有对应的描述，所以我自己总结了position的一些基础知识点。

定位

定位的目的是为了更好控制和摆放box，从而实现需要的网页布局。与flex布局的容器、坐标轴等概念不同，定位布局可以轻松任意指定box的摆放位置，定位的属性分为两种，一是边的偏移，二是定位的方式。

边偏移

边偏移有四个属性，分别是top，left，right和bottom，对应于基于顶部，左边，右边和底部的偏移。注意，如果position是默认值，也就是静态定位static时，指定边偏移是无效的行为。例如下面的代码，对于static-view类选择器，我们没有指定position的值，因此position设为默认值static，此时指定属性left是无效的行为：

/*  index.wxss */
.static-view{
  height: 100px;
  width: 100px;
  background-color:red;
  left:50px;
  /* position: static; */
}

显示效果如下，红色正方形仍然贴着屏幕左端：

定位方式

定位的方式即position的值，常用的有五种，分别是静态定位static（默认值）， 相对定位relative， 绝对定位absolute， 固定定位fixed和粘性定位sticky。接下来分别介绍一下各种定位方式的区别。

静态定位 static

静态定位是所有元素的默认定位方式，当你没有为元素指定position的值时，默认值就是static，举个例子，在.wxml中渲染三个不同颜色的view，它们的position都为默认的static：

<!-- index.wxml -->
<view class='view-red'></view>
<view class='view-blue'></view>
<view class='view-green'></view>

/* index.wxss */
.view-red{
  height: 100px;
  width: 100px;
  background-color:red;
  /* position: static; */
}

显示效果如下，三个view按照标准流的方式排列：

注意，在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

相对定位 relative

相对定位是将元素相对于它的正常位置进行定位的，所谓的正常位置就是position为static时元素在标准文档流中的位置。相对定位的position值为relative，我们修改刚刚红色正方形的position为relative，并设置left为50px：

/* index.wxss */
.view-red{
  height: 100px;
  width: 100px;
  background-color:red;
  left: 50px;
  position: relative; 
}

显示效果如下，可以看到红色正方形相对于刚刚的位置向右偏移了50px：

绝对定位 absolute

绝对定位比较特殊，因为它脱离了标准文档流，以其父容器或父容器中最近的非static(其他四种定位方式)元素的位置为参考。如果没有找到这样的非static元素，就以page作为参考。绝对定位的position值为absolute，我们修改蓝色正方形的position为absolute，并设置left为100px，top为100px;：

/* index.wxss */
.view-blue{
  height: 100px;
  width: 100px;
  background-color:blue;
  left:100px;
  top:100px;
  position: absolute;
}

显示效果如下，由于没有非static的父容器，view-blue以page为参考位置，left和top指定了它的偏移。还可以看到，绿色正方形在原来的位置向上移动了，原因是蓝色正方形使用了绝对定位，脱离了标准文档流，就为绿色正方形“腾出”了它原来的位置。

我们换个例子，让红色正方形作为蓝色正方形的父容器，代码如下：

<!-- index.wxml -->
<view class='view-red'>
    <view class='view-blue'></view>
</view>

/* index.wxss */
.view-red{
  height: 300px;
  width: 300px;
  background-color:red;
  left: 50px;
  position: relative; 
}
.view-blue{
  height: 100px;
  width: 100px;
  background-color:blue;
  left:200px;
  top:100px;
  position: absolute;
}

显示效果如下，可以看出此时蓝色正方形以红色正方形的位置作为参考：

固定定位 fixed

固定定位也脱离了标准文档流，可以把它理解为以page为参考的绝对定位，固定定位的position值为fixed，我们常常会在顶部或底部导航栏中使用固定定位。以自定义tabBar组件为例：

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

显示效果如下，无论如何滚动，tabBar都会固定在屏幕底部。

关于自定义tabbar组件，可以查看该代码片段：自定义tabBar组件

粘性定位 sticky

粘性定位的元素依赖于用户的滚动，在相对定位和固定定位之间切换。一般情况下，sticky等同于relative，当页面滚动超出目标区域时，它便切换为fixed，固定在目标位置。目标位置通过指定top, left, right和bottom来设置。修改代码如下：

<!-- index.wxml -->
<view style="height:100px"></view>
<view class='view-blue'></view>
<view class='view-green'></view>
<view style="height: 3000px;"></view>

/* index.wxss */
.view-blue{
  height: 100px;
  width: 100px;
  background-color:blue;
  position: relative;
}
.view-green{
  height: 100px;
  width: 100px;
  background-color:green;
  position: sticky; 
  top:0px;
}

显示如下，此时绿色正方形是相对定位，在标准文档流中：

下拉滚动条100px，可以看出绿色正方形仍为相对定位：

继续下拉滚动条，可以发现蓝色正方形消失，但绿色正方形一直处于屏幕顶端，此时已经切换为固定定位：

覆盖问题

在开发中，我们常常使用子元素绝对定位，父元素相对定位的方法来控制布局，但是仍会遇到不同元素的覆盖现象，可以通过设置属性z-index来解决。z-index的默认值是0，取值越大，定位元素在层叠次序中就越优先；如果取值相同，则以后渲染的优先。

总结

定位布局是各自布局方法中较为简单的一种，它的属性一是边偏移，二是定位方式，两者配合使用才可以构造出美观的布局。