position属性值详解

position属性值有5个：static,relative,absolute,fixed,sticky

static

默认值

relative

相对定位，不会对其他元素的位置产生影响，因此元素之间可能产生重叠，相对于元素的默认位置进行偏移，搭配top,right,bottom,left，left和top搭配，right和bottom搭配

fixed

相对定位，不会对其他元素的位置产生影响，因此元素之间可能产生重叠，相对与浏览器进行偏移，定位基点为浏览器窗口。搭配left,right,bottom,top使用。

absolute

相对定位，不会对其他元素的位置产生影响，因此元素之间可能产生重叠，相对于上级元素进行偏移，条件是上级元素不能为static，否则定位基点变成html这个dom，搭配top,right,bottom,left使用。

使用：

<div class="father">
    <div class="son">   
    </div>
</div>

.father {
    position: relative;
}
.son {
    position: absolute;
    left: 66px;
    top: 66px;
}

以上代码.son元素相对于father元素进行往右66px往下66px的偏移

重点：.son元素会被正常文档流忽略，不会占用空间。

sticky

一般用于导航条，脑补京东详情页，搭配left等使用。它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。

使用：对于safari要添加-webkit-sticky-

.toolbar {
  position: -webkit-sticky; /* safari 浏览器 */
  position: sticky; /* 其他浏览器 */
  top: 20px;
}

上面代码中，页面向下滚动时，.toolbar的父元素开始脱离视口，一旦视口的顶部与.toolbar的距离小于20px（门槛值），.toolbar就自动变为fixed定位，保持与视口顶部20px的距离。页面继续向下滚动，父元素彻底离开视口（即整个父元素完全不可见），.toolbar恢复成relative定位。

例子：动态堆叠照片

代码：

<div><img src="pic1.jpg"></div>
<div><img src="pic2.jpg"></div>
<div><img src="pic3.jpg"></div>

div {
    position: sticky;
    top: 0;
}

它的原理是页面向下滚动时，每张图片都会变成fixed定位，导致后一张图片重叠在前一张图片上面

例子：表格th固定，数据滚动

代码：

<table>
    <thead>
        <tr><th>姓名</th><th>年龄</th></tr>
    </thead>
    <tbody>
        <tr><td>小明</td><td>11</td></tr>
        <tr><td>小洪</td><td>12</td></tr>
        <tr><td>小黑</td><td>13</td></tr>
    </tbody>
</table>

th {
    position: sticky;
    top: 0;
}

注意：sticky必须设置在th上

复习下table的结构：

<table>
    <thead>
        <tr><th>标题1</th><th>标题2</th></tr>
    </thead>
    <tbody>
        <tr><td>数据1</td><td>数据2</td></tr>
    </tbody>
</table>

or：

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>