CSS定位

position 属性的作用

position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。
static
relative
fixed
absolute
sticky
static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。
relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。

static

浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。
static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。

relative

relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。
top、bottom、left、right四个属性来指定偏移的方向和距离。

<style>
#box1{ width:100px; height:100px; background: red;}
#box2{ width:100px; height:100px; background: blue; position:relative; left: 100px; top: 100px; }
#box3{ width:100px; height:100px; background: yellow;}
</style>

...
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

----------------------------------------------------

absolute

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

<style>
#box1{ width:100px; height:100px; background: red; position:absolute; }
#box2{ width:100px; height:100px; background: blue; }
</style>

.....
<div id="box1"></div>
<div id="box2"></div>

----------------------------------------------------
(蓝色块被红色覆盖)

fixed

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

body{ height: 2000px;}
div{ position:fixed; top:0; left:0;}

<div>这是一个块</div>

----------------------------------------------------

sticky

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

 body{ height:2000px; }
 div{  background:red; position:sticky; top:100px; }

	...
	<p>aaaaaaaaa</p>
    <p>aaaaaaaaa</p>
    <p>aaaaaaaaa</p>
    <p>aaaaaaaaa</p>
    <p>aaaaaaaaa</p>
    <p>aaaaaaaaa</p>
    <div>这是一个块</div>
    <p>bbbbbbbbb</p>
    <p>bbbbbbbbb</p>
    <p>bbbbbbbbb</p>
    <p>bbbbbbbbb</p>
    <p>bbbbbbbbb</p>
    <p>bbbbbbbbb</p>

----------------------------------------------------