css当中除了盒模型之外还有层模型，而出发层模型的主要属性就是position属性，该属性有四个属性值，没有static、relative、absolute、fixed
static
static属性是position，默认的属性值，当position没有设置属性的时候，该属性值就是static
relative
position: relative; 相对定位,保留原来的位置进行定位
- 它同样能跳出当前层面，但是保留了原来的位置，也就是他的依然脱离的当前的层面，他原来的位置保留的意思就是别的元素会看到它的，假如设置了left、top移动了它之后，他原来的位置就像他的肉体，而移动之后的东西，相当于它的灵魂，和其他的元素不在同一个层面。
- 因为它保留了原本位置的特性，所以在页面布局的时候作用其实很小，应用场景很小，所以它一般用来给absolute当做陪衬的，给一个父级元素设置定位之后，就能让子元素设置absolute之后完美定位了。
- 不能触发bfc
<div class = "demo1"></div>
<div class = "demo2"></div>
div{
width: 100px;
height: 100px;
}
.demo1 {
background-color: green;
position: relative;
left: 50px;
top: 50px;
}
.demo2 {
background-color: red;
}
relative.png灵魂出窍
可以看到这里绿色元素脱离原来的位置了，但是没有让出原来的位置
absolute
position: absolute;用来设置绝对定位，而这个元素就是层模型很关键的属性
- 判断一个absolute元素根据啥定位的：==①有定位的父级，②body== 所以一般我们将父级元素设置为relative作为坐标，要定位的元素设为absolute来根据父级定位
- 当一个元素设置了position: absolute;的时候，它就脱离了它原本的位置，到达了另外一个层面，这样也就把原来的位置给让出来了。
- 该属性有对应的四个配合定位的属性，元素脱离了原来的层面是为了定位的，并且它的定位也不会影响其他的元素的位置，这样就很方便的随行所欲的控制元素了。而这四个配合的属性就是
lefttoprightbottom显而易见，他们就是控制位置的元素。这四个值==合理搭配==能将我们的元素处理到正确的位置 - absolute 属性会触发元素的bfc
在浏览器中，我们通过元素的左上角来设置lefttop,通过右下角来设置rightbottoms
absolute和relative的区别
<div class="wrapper">
<div class="box">
<div class="content"></div>
</div>
</div>
.wrapper {
width: 200px;
height: 200px;
background-color: orange;
margin-top: 100px;
margin-left: 100px;
}
.box{
width: 100px;
height: 100px;
background-color: black;
margin-left: 100px;
}
.content {
width: 50px;
height: 50px;
background-color: yellow;
}
absoluterelative.png
我们通过控制margin让元素处于这种状态
给黄色的加上
pasition: absolutle;left:50px;top:50px;之后
position.png
我们发现这里的黄色方块跑出去了
当我们给黑色的加上
position:relative 的时候
relative.png
可看到这里黄色方块又根据黑色元素定位了
总结
- absolute属性 根据最近的有定位的父级进行定位，如果没有就根据文档进行定位
- relative属性 相对自己原来的位置进行定位
- 将relative当基地当做参照，用absolute元素进行定位。
fixed
人称广告定位，很多时候你会看到网页上面有很多的小广告，它就在那个位置，不过你怎么滑动页面，它都会在那里，一动不动，没错，它可能就是fixed定位实现的。
position: fixed; 脱离文档流，相对于浏览器窗口进行定位，浏览器窗口，也可以说是可视区
应用
让元素居中定位
<div class="wrapper">
<div class="content"></div>
</div>
/*让content在wrapper当中垂直居中*/
.wrapper {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
.content {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
}
垂直水平居中.png
就是相对于文档进行居中了，同样fixed定位也可以使用这种居中方式，实现在屏幕中间的广告！
关键点：使用margin来平衡那段因为定位移出去的距离！
使用层级定位实现三栏布局
<div class="left"></div>
<div class="right"></div>
<div class="mid"></div>
<!-- 这里mid必须写在结构的最下面，如果在前面的话，我们没有设置top，因为div独立成行的特性，他会占据一行，让left和right换行展示。但是如果对right和left设置了top:0;的话就可以很随意了 -->
*{
margin:0;
padding:0;
}
.left {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.right{
position: absolute;
background-color: black;
right: 0;
width: 100px;
height: 100px;
}
.mid {
height: 100px;
margin-right: 100px;
margin-left: 100px;
background-color: orange;
}
能够在三栏布局.png
关于浏览器的一个常见的问题
我们在编写代码之后都有一个初始化的过程*{margin:0;padding:0;}，为了去除页面上元素的一些默认的内边距和外边距，避免一些外界的因素导致的bug。
其实，在页面当中body元素本身就包含了8px的margin；
body.png
