文档流
相当于一种规则:
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会根据值清除不同浮动对该元素的影响。.