流的概念
文档流是相对于盒子模型讲的
文本流是相对于文字段落讲的
元素浮动之后,会让它跳出文档流,也就是说当它后面还有元素时,其他元素会无视它所占据了的区域,直接在 它身下布局。但是文字却会认同浮动元素所占据的区域, 围绕它布局,也就是没有脱出文本流。 但是绝对定位 后,不仅元素盒子会脱出文档流,文字也会脱 出文本流。 那么后面元素的文本就不会再认同它的区域位置,会 直接在它后面布局,不会再环绕。 当然你可以使用 z-index 来让底部的元素到上面来,类似于一个图层的概念。
一、css定位
CSS 定位属性允许对元素进行定位改变其在页面的位置。
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
普通流中的元素的位置由元素在 HTML 中的位置决定。
二、相对定位
相对盒子自己原来的位置进行调整,称为相对定位
left:向右移动(左边与原先间隔固定值)right:向左移动 top:向下移动 bottom:向上移动 值可 为负,为负时向相反方向移动
三、绝对定位
绝对定位:盒子可以在浏览器中以坐标进行位置精准描述,拥有自己的绝对位置
left:到左边的距离; right:到右边的距离; top:到顶部的距离; bottom:到底部的距离 值 可为负,为负时向相反方向移动
绝对定位的元素脱离标准文档流
绝对定位的元素脱离标准文档流,将释放自己的位置,对其他元素不会产生任何干扰,而是对他们 进行压盖
绝对定位的参考盒子
绝对定位的盒子并不是永远以浏览器作为基点
绝对定位的盒子会以自己祖先元素中,离自己最近的拥有定位属性的盒子,当做基准点,这个盒子 通常是相对定位的,所以这个性质也叫做子绝父相
绝对定位盒子的垂直居中
堆叠顺序 z-index属性
决定盒子的层级顺序,值为数字,没有单位,数值大的将覆盖数字小的部分
四、固定定位
固定定位:不管页面如何滚动,他都永远固定在那里
固定定位的用途:“返回顶部”、“楼层导航”
五、粘性定位
(这是 css3 新增的属性值)粘性定位。最初会被当作是relative,相对于原来的位置进行偏移; 一旦超 过一定阈值之后,会被当成 fixed定位,相对于视口进行定位。position:sticky ,其支持还不是很普 遍