文档流：

从上至下，从左至右的布局
符合html中标签本身含义的布局，比如某些标签独占一行，有些标签属于行内元素等。

脱离文档流：

将元素从普通文档流中去掉，其他元素在排版的时候会当作这个元素不存在去排版。

什么会导致元素脱离文档流：

float：脱离文档流，但其他的元素文字会找到该元素的文字位置。

position:absolute：脱离文档流，其他元素完全无视该元素。它的定位取决于它的父元素有没有定位（position），如果有，那么它就根据定位了得父元素来定位。

实例：

1. 正常流：

html及css：

<style type="text/css">
        .add{
            background-color: transparent;

        }
        .no{
            background-color: #c685d9;
            width:200px;
        }
    </style>

<div class="add">
    You're out of touch in overtime,
    You're running in you're running,Better left behind,
    You've dropped the ball to catch it with,And is it all there really is,
    You're thinking but you're thinking,'Cause you know the best all things in life are free,
    And it's all you need,You gotta live your life,
    You gotta treat you right.</div>
<div class="no">
    数着春去熟透的红豆，无人黄昏后，
    庭前寒冷深秋为谁消瘦，
    月下惟有我的身影投，该与谁厮守，
    酒入喉却解不了愁，
    芙蓉花又栖满了枝头，奈何蝶难留，
    漂泊如江水向东流，
    望断门前隔岸的杨柳，寂寞仍不休，
    我无言让眼泪长流，
    我独酌山外小阁楼，听一夜相思愁，
    醉后让人烦忧，心事难收，
    山外小阁楼，我乘一叶小舟，
    放思念随风漂流。</div>

2. float：即给class为add的元素加了float:left;之后

可以看到英文部分其实挤掉了第二个元素的中文部分，在第二个元素的位置还是占位了。

3. position:absolute：给class为add的元素加了.position:absolute;之后

而如果将英文文字的元素背景色更改之后：

这次可以看到两个元素时完全重叠的，包括文字部分，且第一个元素是在第二个元素之上的。

那么接下来就来看看position

position的六个值：

1. static:默认属性，元素出现在正常流中

2. relative：相对定位，相对于自身偏移，不脱离文档流，没有定位偏移量（top，right，bottom，left四个值）对元素无影响(相对于自身偏移)

3. absolute：绝对定位，相对于最近的有偏移的元素，使之脱离文档流

4. fixed：固定定位，相对于可视区定位，脱离文档流

5. inherit:从父元素继承position值

6. sticky（兼容性不好），不脱离文档流，和relative很像，css3新提出的一种方式，在屏幕范围内位置不受left，top影响，当元素位置移出偏移范围时，定位会变成fixed根据left，top值变成固定定位。就是在一个内容中，我们可以固定一个部分，然后到了另一个内容，又会固定另外一个部分。

position与z-index的关系：

z-index只能在position属性值为relative或absolute或fixed的元素上有效。
基本原理是：z-index的值可以控制定位元素在垂直于显示屏幕方向（z轴）上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。
z-index只决定同一父元素中的同级子元素的堆叠顺序。即他们的堆叠次序是先根据父元素的z-index值来决定的。若同级的元素z-index值相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。

需要设置子元素在父元素下时，可不设置父元素的z-index值，然后将子元素的z-index设置为负值。

例：

不设置z-index时：

html及css：

<style type="text/css">
        .parent{
            background-color: #cccccc;
            width:300px;
            height:100px;
        }
        .child{
            background-color: #414141;
            width:200px;
            height:50px;
        }

<div class="parent">
    parent
    <div class="child">child</div>
</div>

给父子元素都加上加上position:absolute;及给子元素z-index:-5;后

sticky的使用实例：

<style>
        body {
            margin: 0;
            padding: 0;
        }
        .wrap {
            border: 20px solid #c685d9;
        }
        .header {
            position: sticky;
            top: 20px;
            border: 20px solid #ffcccc;
            margin-top: 20px;
        }
</style>

<div class="wrap">
    <div class="header">
        这是头部
    </div>
    <div class="content">
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
        这是内容部分<br>
    </div>
</div>
<div class="wrap">
    <div class="header">
        这是另一个头部
    </div>
    <div class="content">
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
        这是另一个内容<br>
    </div>
</div>

随着滚动距离到下一个部分，就会固定另一个头部块。

脱离文档流，position与z-inex的关系