层模型
css中元素的层次模型主要是由position这个属性来决定的。css
position属性：position的意思是定位，一样这个属性的做用就是给元素施加定位。它一共有四个值，分别是static、absolute、relative、fixed。浏览器
static
• static是默认的属性，当咱们没有写position属性的时候，元素默认的定位就是static定位。app
absolute
• absolute是绝对定位的意思，它会使元素脱离原本的位置再进行定位，它会使元素像立交桥同样出现空间上的分层，当元素脱离原来的位置以后，其余的元素就会看不到这个元素。同时，absolute也能够触发bfc。布局
• 同时，当咱们改变定位以后，这个元素就有四个属性可使用了，分别是left、right、top、bottom。这四个属性分别能够设置当前元素距离左边、右边、上边和下边的距离为多少，可是四个属性不多一块儿出现，通常都是两两一对出现，其中left和top是一对，right和bottom是一对。学习
这个div就会脱离原来的位置，而后距离浏览器上边框和左边框分别100px的距离。spa
• 最后一点，absolute的参照物是距离它最近的有定位（除了static）的父级，当每个父级都没有定位的时候，元素会相对于浏览器边框进行定位。3d
relative
• relative是相对定位的意思，它会让元素保留原来的位置再进行定位，后面的元素能够看到它原本的位置。blog
• 当position改为relative以后，left、top、right、bottom进行的定位就会变成相对于自身的位置进行移动了。开发
• relative的参照物是元素自身。it
• 当咱们仅仅给元素设置position:relative;并无设置left、right、top、bottom属性的时候，元素的定位是没有发生任何改变的，由于这个特性，通常在开发中，relative都是用做设置参照物的，一个absolute元素要相对于那个元素进行移动，就给那个元素设置relative的定位就能够了。
咱们经过例子来看一下absolute和relative的区别。
咱们如今有这样一个结构：
<div class=”wrapper”>
<div class=”box”>
<div class=”content”></div>
</div>
</div>
这个时候时候咱们在浏览器中看到的样式是这个样子的：
如今咱们给content加上定位的样式。
这个时候浏览器中的样式就会发生改变，content那个黄色的小方块会跑到橘黄色的方块外面：
这是由于，当咱们给content设置position:absolute;以后，浏览器在渲染的时候，会先向上找到box这个div，看看这个div有没有定位，由于没有，因此继续向上找wrapper，依然没有，再向上找body，仍是没有，因此最后就是相对于浏览器边框定位，这个时候content的left属性就是相对于浏览器边框左边有50px的距离的意思。
如今咱们把content的定位换成relative，浏览器中的结果变成了这个样子：
原本content黄色小方块在黑色方块的左上角，而后relative相对与自身的位置进行定位，这个时候的left属性的意思就是相对于原本在黑色左上角的那个位置向右移动了50px的距离，也就是如今这个黄色小方块所在的位置。
所以，总结一下absolute和relative的特色以下：
• absolute：
1.脱离原来位置进行定位
2.相对于最近的有定位的父级进行定位，若是没有那么相对于浏览器边框定位。
• relative：
1.保留原来位置定位
2.相对于最近的有定位的父级进行定位
通常被用来设置参照物
fixed
fixed定位是相对于视口的定位，咱们在网页上都见过左右两边不随着滚轮滚动而改变位置的广告栏，这种广告栏就是用fixed定位的。
<div class=”fixed”></div>
这段代码中，div.fixed这个元素就是一直在视口的右边，不随着咱们滚动而改变相对于视口的位置。
最后提一点
• 值得注意的是，当咱们写这样一段代码的时候：
<div class=”demo”></div>
咱们把absolute换成relative以后，会发现整个div会向上移动一小段距离，这是为何呢？
答案其实就在上一篇的文章里，margin合并问题——body标签自己有8px的margin，而四个方向的margin天然包括了margin-bottom，咱们为div.demo设置了margin-top，就会致使margin合并的问题发生，当position是relative的时候，并无触发bfc，因此中间的距离会取两者的最大值，也就是200px，当position是absolute的时候，由于触发了bfc效果，从而消除掉margin合并的bug，所以中间的距离是200+8=208px。
一点小应用
1.咱们学习了定位以后，就能够实现前面文章提到的元素水平垂直居中的效果了哟~
只要咱们给一个div加上下面的样式：
这个div就会在有定位的父级里面是水平垂直居中了哟~
2.咱们还能够实现多栏布局了！
首先咱们写三个div，分别起类名为left、mid、right，而后分别加上以下的样式：
<div class=”left”></div>
<div class=”right”></div>
<div class=”mid”></div>
咱们首先固定左侧和右侧的两个div，而后让中间的div分别给左侧和右侧留出一个固定宽度的margin以后，让自身自适应屏幕的大小便可实现三栏布局效果。
• 要注意的是，div.mid记得写在后面，若是写在最前面的话，由于div是block块级元素会独占一行，这样就会把左侧和右侧的div给挤到下一行了。固然咱们给.left和.right都加上top:0px;以后，这个问题也就不用考虑了。
此次的层模型总结就到这里了，但愿对你们有帮助哟~