流畅移动CSS教程·定位

通过定位，可以实现对元素更加精确的控制。

1 引言

网页中的元素都是有一个默认的排列顺序，比如块元素，也就是类似div之类的元素会自动占一行，同时所有元素会默认自上向下排列。

我们看一下实例代码，

  <div>
    <div style="background: blue; height: 100px"></div>
    <div style="background: red; height: 100px"></div>
    <div style="background: yellow; height: 100px"></div>
    <div style="background: orange; height: 100px"></div>
  </div>

我们可以看到，这四个div会默认自上而下排列，但是如果我们想要别的样式效果呢？比如下面的

如上面动态图右侧的分区、客服和回到旧版的按钮。就算页面上下变化，也可以固定住在屏幕右侧。

按理说，它会跟别的元素合并一块，然后随着页面上下移动的，就像我们上面那个例子那样，但是现在却脱离了原来的布局，单独跳了出来。

而这个功能实现就需要用到position这个属性。

我们接下来好好介绍这个属性。

---

2 设置定位属性

position总共有static，absolute，relative三种。

2.1 设置默认属性·static

其中static是默认值，也就是说，如果不设置position属性，则系统会自动采用这种效果，也就是从上往下的正常排列。

  <div>
    <div style="background: blue; height: 100px"></div>
    <div style="background: red; height: 100px"></div>
    <div style="background: yellow; height: 100px"></div>
    <div style="background: orange; height: 100px"></div>
  </div>

2.2 设置相对定位·relative

相对定位中的相对，指的是相对于默认位置。

可以参照上面那张图，蓝、红、黄、橙四个排列方式就是默认位置，就是没有设置position时的位置。

而通过设置相对定位可以让元素相对于原来的位置进行移动，同时原来的位置也会空出来，不会被其它元素挤掉。

正确的是有相对定位的方式是，首先声明为positin:relative，然后通过top，bottom，left，right进行四个方向的移动。示例如下，

  <div>
    <div style="position:relative;top:50px;background: blue; height: 100px"></div>
    <div style="background: red; height: 100px"></div>
    <div style="background: yellow; height: 100px"></div>
    <div style="background: orange; height: 100px"></div>
  </div>

如上图所示，整个蓝色区域向下移动了50px，同时原来的位置并没有被占用，会被空出一块。

2.3 设置绝对定位·position

相对定位是相对于原来的位置，而绝对定位则是相对于父元素进行相对定位。

使用方式是，声明position:absolute，同时使用top,bottom,left,right向四个方向移动。

  <div>
    <div style="position:absolute;top:50px;background: blue;width:50px; height: 100px"></div>
    <div style="background: red; height: 100px"></div>
    <div style="background: yellow; height: 100px"></div>
    <div style="background: orange; height: 100px"></div>
  </div>

蓝色方块相对于父元素向下移动了50px。

有没有注意到一点，我为蓝色方块设置了宽度。

如果在绝对定位下，不为元素设置宽度和高度的话，则元素无法显示出来。效果如下，

  <div>
    <div style="position:absolute;top:50px;background: blue;height: 100px"></div>
    <div style="background: red; height: 100px"></div>
    <div style="background: yellow; height: 100px"></div>
    <div style="background: orange; height: 100px"></div>
  </div>

根据上面的效果，我们设置了蓝色方块，同时设置它的绝对定位，但是依旧看不到有蓝色方块。这是因为没有给他设置宽度，，他就默认为0宽度，所以看不到。这一点一定要注意。因为它已经脱离了默认的布局，所以要给它设置的宽高。

2.4 设置固定定位·fixed

以浏览器为容器进行定位。

具体使用方式是，首先定义position:fixed，然后通过top、bottom、left、right进行定位。

实例如下，

  <div style="height:1500px;">
    <div style="position:fixed;top:50px;right:50px;background: blue;width:100px;height: 100px"></div>
    <div style="background: red; height: 100px"></div>
    <div style="background: yellow; height: 100px"></div>
    <div style="background: orange; height: 100px"></div>
  </div>

可以看到，蓝色小方块相对于浏览器进行定位，并不会随着页面的上下移动而改变位置。

2.5 设置粘性定位·sticky

这个定位很神奇，相当于相对定位和固定定位的总和。

首先会让元素进行正常的排列，当页面下移，会让元素相对于浏览器进行定位。

  <div style="height:1500px;">
    <div style="background: blue;height: 100px"></div>
    <div style="position:sticky;top:0px;background: red;height: 100px"></div>
    <div style="background: yellow; height: 100px"></div>
    <div style="background: orange; height: 100px"></div>
  </div>

就像上面的图片所示，本来红色排在第二块，而在页面向下移动到红色方块时，红色方块也会随着屏幕自动下移。