一、总结
一句话总结：
绝对定位是定位的一种，绝对定位会脱离文档流，用position: absolute来设置，通过top、bottom、left、right可以设置定位的偏移量
1、绝对定位的基本操作？
对元素设置position属性为absolute，然后用top、bottom、left、right中的一个或者两个设置偏移
.span1{ position: absolute; left: 200px; top: 200px; }
2、绝对定位(absolute)的主要特点？
绝对定位会【脱离文档流】，绝对定位是【相对于离他最近的开启了定位的祖先元素进行定位】，如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
3、绝对定位(absolute)的父元素为什么一般都设置为相对定位(relative)？
表示这个绝对定位是相对父元素来进行的
二、绝对定位
博客对应课程的视频位置：26、绝对定位
https://www.fanrenyi.com/video/10/66
1、层布局
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作。
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（position）属性来支持层布局模型。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
2、position的属性值
static：默认值，元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
3、绝对定位的特点
1.开启绝对定位，会使元素脱离文档流，
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质，内联元素变成块元素，块元素的宽度和高度默认都被内容撑开
4、定位偏移量的设置
当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量
left：元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上边的偏移量
bottom：元素相对于其定位位置下边的偏移量到
三、课程代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>绝对定位</title> 6 <style> 7 .box{ 8 width: 200px; 9 height: 200px; 10 } 11 .box1{ 12 background-color: #605ca8; 13 } 14 .box2{ 15 background-color: red; 16 position: absolute; 17 left: 0; 18 top: 0; 19 } 20 .box3{ 21 background-color: #bfa; 22 } 23 .box2_parent{ 24 position: relative; 25 width: 300px; 26 height: 300px; 27 background-color: lightgray; 28 left: 200px; 29 } 30 .span1{ 31 width: 100px; 32 height: 100px; 33 background-color: lemonchiffon; 34 position: absolute; 35 left: 200px; 36 } 37 </style> 38 </head> 39 <body> 40 <!-- 41 绝对定位的特点 42 1、绝对定位会脱离文档流 43 2、当我们给绝对定位的元素只设置绝对定位而没有设置偏移量的时候，绝对定位的元素还是老老实实的待在原来的位置 44 3、绝对定位是否是按照浏览器的窗口来定位的呢？？？不是的， 45 绝对定位是相对于最近设置了定位属性的祖先元素来定位的， 46 如果所有的祖先元素都没有定位，那么就是相对于浏览器窗口来定位的 47 定位：不是static，可以是relative、fixed、absolute 48 最近设置了定位属性的祖先元素： 49 小技巧： 50 我们做绝对定位的时候，我们一般会给这个绝对定位的元素的父亲元素来设置相对定位。 51 这是为了表示我们的绝对定位是相对父元素来进行的 52 因为相对于父元素定位的话我们可以很好的定位原点 53 4、绝对定位可以使元素提升一个层级 54 5、绝对定位会改变盒子的一个性质，会把盒子变成快元素，这个时候的块元素的宽高都是由内容撑开的 55 6、无论是块状元素还是内联元素，都是可以设置绝对定位的 56 57 绝对定位总结特点： 58 1、脱离文档流 59 2、绝对定位是相对于最近设置了定位属性的祖先元素来定位的， 60 如果所有的祖先元素都没有定位，那么就是相对于浏览器窗口来定位的 61 62 小技巧 63 我们做绝对定位的时候，我们一般会给这个绝对定位的元素的父亲元素来设置相对定位。 64 这是为了表示我们的绝对定位是相对父元素来进行的 65 66 67 --> 68 <div class="box box1">box1</div> 69 <!--<div class="box2_parent">--> 70 <!-- <div class="box box2">box2</div>--> 71 <!--</div>--> 72 <div class="box box2">box2</div> 73 <div class="box box3">box3</div> 74 <span class="span1"> 75 span1 76 </span> 77 </body> 78 </html>
四、什么是层模型
什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
1，层模型--绝对定位（相对于父类）
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
2，层模型--相对定位（相对于以前）
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px，向右移动100px;
3，层模型--固定定位（相对于网页窗口）
固定住某一坐标。
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
五、层模型定位属性position的属性值
转自或参考：CSS position(定位)属性
https://www.cnblogs.com/guolao/p/9048308.html
关于CSS position，来自MDN的描述：
CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。
然后来看看什么是文档流(normal flow)，下面是 www.w3.org 的描述：
Normal flow
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
- normal flow直译为常规流、正常流，国内不知何原因大多译为文档流；
- 窗体自上而下分成一行一行，并在每行中按从左至右的顺序排放元素；
- 每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端，若当前行容不下，则另起新行再浮动；
- 内联元素也不会独占一行，几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素；
- 有三种情况将使得元素脱离normal flow而存在，分别是 float，absolute ，fixed，但是在IE6中浮动元素也存在于normal flow中。
一、position: static
MDN的描述：
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。
个人补充：static是position的默认值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS-position-static</title> 6 <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css"> 7 <style> 8 .container{ 9 background-color: #868686; 10 width: 100%; 11 height: 300px; 12 } 13 .content{ 14 background-color: yellow; 15 width: 100px; 16 height: 100px; 17 position: static; 18 left: 10px;/* 这个left没有起作用 */ 19 } 20 </style> 21 </head> 22 <body> 23 <div class="container"> 24 <div class="content"> 25 </div> 26 </div> 27 </body> 28 </html>
对 content 的 position 设定 static 后，left就失效了，而元素（content）就以正常的 normal flow 形式呈现。
二、position: relative
MDN的描述：
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
个人理解：相对于normal flow中的原位置来定位。
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>CSS-position-relative</title> 8 <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css"> 9 <style> 10 .container{ 11 background-color: #868686; 12 width: 100%; 13 height: 300px; 14 } 15 .content_0{ 16 background-color: yellow; 17 width: 100px; 18 height: 100px; 19 } 20 .content_1{ 21 background-color: red; 22 width: 100px; 23 height: 100px; 24 position: relative;/* 这里使用了relative */ 25 } 26 .content_2{ 27 background-color: black; 28 width: 100px; 29 height: 100px; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="container"> 35 <div class="content_0"> 36 </div> 37 <div class="content_1"> 38 </div> 39 <div class="content_2"> 40 </div> 41 </div> 42 </body> 43 </html>