一.定位方式1.position:static;默认定位方式2.position:relateve;相对定位,相对于该元素静态定位的位置(即元素所在正常文档流的位置)eg:<!DOCTYPE html><html> <head> <title>position相对定位</title> </head> <style> .container { width: 100%; height: 200px; background: silver; } div[class^=“div”] { width: 40px; height: 40px; background: pink; border: 1px solid yellow; } .div2 { position: relative; top: 40px; left: 40px; } </style> <body> <div class=“container”> <div class=“div1”>1</div> <div class=“div2”>2</div> <div class=“div3”>3</div> </div> </body></html>结果:相对定位并没有脱离文档流,相对于该元素以前所在的位置进行偏移3.position:absolute(绝对定位),相对于除了static定位以外的父元素进行定位,如果父元素没有定位,就根据body(即浏览器窗口)进行定位,绝对定位的子元素是脱离文档流的,在原文档中不占有空间eg:把上述例子第二个子div定位方式修改下,它的父级元素(class=“container”)没有定位,所以相对于body进行定位.div2 { position: absolute; top: 40px; left: 40px; }结果:4.position:fixed(固定定位),相对于浏览器窗口进行定位,即body5.position:inherit;继承父元素的定位方式二.文档流1.定义:文档流是在 HTML 中的位置顺序决定排布的过程2.脱离文档流的三种方式:positon:relative;positon:fixed;float浮动3.以上脱离文档流会使当前元素形成一个BFC(块级格式化上下文),对于BFC的理解,请看我之前的总结https://segmentfault.com/a/11…