文档流/脱离文档流
文档流,指的是元素在排版布局过程中,元素会从自上到下,从左到右的顺序依次排列;
脱离文档流,指的是元素不再按照这个自然顺序排列;别的元素在文档流中排列时就当没有这个脱硫文档流的元素一样;
脱离文档流的方法
定位 / 浮动
1、定位的几种方式:
(1)、static: 默认值,按照文档流的顺序进行排列;-- 未脱离文档流,占据文档流;
(2)、relative:他将出现在它所在的位置之上,相对自己本身进行定位;移动将会覆盖文档流中的元素;(它所占的空间将依然会被保留); -- 未脱离文档流,占据文档流;
(3)、absolute:相对于第一个relative定位的父元素进行定位;(他所占的空间将会从文档流中移除)
(4)、fixed:相对于浏览器窗口进行定位;(他所占的空间将会从文档流中移除)
定位通过z-index进行层级显示;
2、浮动:
(1)、浮动的框可以向左或向右移动,直到碰到包含他的框或者另一个浮动元素的边框位置。
(2)、对其他浮动元素的影响:后浮动的元素永不会超过先浮动元素的顶端。
(3)、对普通元素的影响:浮动元素会从文档正常流中删除,使得紧挨它的元素位置发生偏移,影响布局。
(4)、对文字的影响:浮动元素向下延伸时,不会影响正常文本的显示,文本会相对于浮动元素进行偏移。