CSS position &居中（水平，垂直）
css position是个很重要的知识点：
知乎Header部分：
知乎Header-inner部分：
position属性值：
fixed：生成绝对定位的元素，相对浏览器窗口进行定位（位置可通过：left,right,top,bottom改变）;与文档流无关，不占据空间（可能与其它元素重叠）
relative：生成相对定位的元素（相对于元素正常位置）（left，right，top，bottom）；relative的元素经常用作absolute的元素的容器块;原先占据的空间依然保留
absolute：生成绝对定位的元素（相对第一个已定位的父元素进行定位；若没有则相对<html>）（left,right,top,bottom）；与文档流无关，不占据空间（可能与其它元素重叠）
static：默认值。没有定位，元素出现在正常的文件流中（left,right,top,bottom,z-index无效！）
inherit：继承从父元素的position值
fixed示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>cascading style sheet</title> 8 <style> 9 #test{ 10 width: 500px; 11 height: 100px; 12 position: fixed; 13 top: 0px; 14 left: 500px; 15 border: 1px solid burlywood; 16 background-color: #F2F2F2; 17 z-index: 2; 18 } 19 .test1{ 20 margin-top: 100px; 21 } 22 .test1, .test2, .test3, .test4, .test5{ 23 width: 200px; 24 height: 300px; 25 border: 1px solid black; 26 position: relative; 27 left: 500px; 28 background-color: gray; 29 } 30 </style> 31 </head> 32 <body> 33 <div id="test"></div> 34 <div class="test1">1</div> 35 <div class="test2">2</div> 36 <div class="test3">3</div> 37 <div class="test4">4</div> 38 <div class="test5">5</div> 39 40 </body> 41 </html>
#test部分始终固定在上方，不发生移动。
relative示例：（原先占据的空间依然保留！）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>position:relative</title> 8 <style> 9 .test1, .test2, .test3{ 10 width: 200px; 11 height: 200px; 12 border: 1px solid orange; 13 } 14 .test2{ 15 border-color: black; 16 position: relative; 17 top:-100px; 18 left: 10px; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="test1">this is part 1</div> 24 <div class="test2">this is part 2</div> 25 <div class="test3">this is part 3</div> 26 </body> 27 </html>