position 定位

1. 固定定位（position:fixed;）

(1) 固定定位解释参考文档：

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/%E5%AE%9A%E4%BD%8D

(2) 固定定位特性：

a. 如果不设定任何偏移值,元素位置不会有任何改变

b. 让元素完全脱离文档流 （不会对文档流里的元素造成布局上的影响）

c. 让内联元素支持宽高

d. 不设置宽度的时候，宽度由内容撑开

e. 提升层级（高于浮动元素）

f. 固定定位始终相对于document发生偏移，并且会固定在屏幕中

g. 触发BFC

注意：固定定位的特性和绝对定位基本一致，不同的是，固定定位始终相对于document发生偏移，并且会固定在屏幕中 ,在做类似返回顶部时常用

    <div class="main" id="top">顶部</div>
    <div class="main" id="first">第一部分</div>
    <div class="main" id="second">第二部分</div>
    <div class="main" id="third">第三部分</div>
    <div class="box">
        <a href="#first">第一部分</a>
        <a href="#second">第二部分</a>
        <a href="#third">第三部分</a>
        <a href="#top">返回顶部</a>
    </div>

　　　

  <style>

        .main {
            height: 200px;
             300px;
            border: 4px solid #4b086d;
            margin: 0 0 800px 50px;
            font: 50px/200px '';
            text-align: center;
        }
        
        .box {
             100px;
            height: 400px;
            background: #5ccce7;
            position: fixed;
            right: 0;
            top: 50%;
        }
        
        .box a {
            display: inline-block;
             100%;
            background: #999;
            color: #fff;
            text-align: center;
            margin: 5px 0;
        }
        
        body {
            margin: 0;
            height: 3000px;
        }

  </style>

2. 固定定位 position:relative

相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移

div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>


.box {
  display: inline-block;
   100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

　　

3.绝对定位 postition:absolute

　　　　absolute：元素框从文档流中完全删除，并相对于其其包含块定位。生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过“left"，"top""right""bottom"属性进行规定。。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>


.box {
   display: inline-block;
   background: red;
    100px;
   height: 100px;
   float: left;
   margin: 20px;
   color: white;
}

#three {
   position: absolute;
   top: 20px;
   left: 20px;
}

4.粘性定位 position:sticky