文档流
相当于一种规则：
1.从左至右，从上到下的布局。
2.符合html中标签本身含义的布局。比如独占一行等等。
脱离文档流
定位方式中应用（float,position:absolute，fixed）
顾名思义，是指这个元素不受文档流规则的约束。它不遵从此时文档流的正常布局，比如从上向下从左往右等等。不受文档流的布局约束后，这个标签在原文档流中所占的空间也被清楚掉。
position
1. static
position的默认值，没有定位，元素出现在正常的流中。
2.fixed
fixed定位是指元素的位置相对于浏览器窗口的固定位置，即使窗口滚动，它也不会滚动，且fixed定位使元素的位置与文档流无关，不占据空间，且会和其他元素发生重叠。
3.relative
1.相对它自己的正常位置的定位。
2.如果移动的值为负数，则直接换成整数；如果值为整数，则直接改变相对方向。
例如：bottom:-20px;就是向下移动20px;
3.即使移动后上半部分与某些元素发生重叠。于下，即使相对元素的内容移动，但是预留空间的元素仍然保存在正常流动，不会对下面其他元素造成影响。
注： top:20px;是指元素的margin外侧和包裹元素的border内测之间的距离是20px;
4.absolute
绝对定位的元素相对于最近的已定位的父元素，如果元素没有已定位position或者设置了默认属性的父元素，那么它的位置相对于
<html>.
脱离文档流导致的问题
在文档流中，一般子元素都会将父元素容器撑开来，但是如果子元素position为fixed或者absolute，脱离文档流，父元素无法被撑开。
解决方案：
1.给js中设置父元素高度等于子元素。
2.给父元素强行设置高度。
重叠元素–z-index属性
z-index只能在position属性值为relative或absolute或fixed的元素上有效，
原理： z-index的值可以控制定位元素在垂直于显示屏幕（Z轴）上的堆叠顺序，值大的元素发生重叠时会在值小的元素上面。
- 默认时，如果位置重叠，后者覆盖前者。
- z-index的值大者覆盖值小者。
- 一般而言，父元素和子元素是不能比较z-index的大小的（但是，如果我们将子元素的z-index值设为负值，父元素不用设置，子元素会被父元素覆盖，重叠。）
- 拼爹时代，不同父元素下的子元素，如果父元素的Z-index大，那么子元素也会跟随父元素，覆盖父元素z-index小的那个子元素。
- 子不孝。不同父元素下的子元素的z-index如果大，并不会将其父元素提携上来。
position：sticky;
没有看懂原博文说的意思，所以我就操作了一下。
1.就是说，在这个页面中的定位，无论将其赋予哪个元素，都会生效，并且，定位于页面的同一位置。
2.同样可设置top值，这个值是border上边缘和包裹元素的下边缘之间的距离。，滚动起来就是和浏览器顶部的距离。
float：
float浮动浮动浮动，也是很好玩，用会它，你的页面元素随便飘。
特性：
1.应用于文字环绕图片
2.创建一个快级框
3.多列浮动布局
4.浮动元素的宽度，高度自适应，但可以设置其值。
1.元素float的时候，该元素自己的display会变为block.
2.父元素如果不加overflow:hidden,不会出现在父元素内，且父元素不被该元素撑开。
3.float元素会占据行内元素空间，影响周围元素。但不会占据块级元素的空间。下一个元素会出现在浮动元素的位置。
4.clear会根据值清除不同浮动对该元素的影响。.
5161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
