css定位

文章目录

• 流的概念

• css定位

• 相对定位

• 绝对定位

• 固定定位

• 粘性定位成 

概要

流的概念

1. 文档流是相对于盒子模型讲的
2. 文本流是相对于文字段落讲的
3. 元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在 它身下布局。但是文字却会认同浮动元素所占据的区域， 围绕它布局，也就是没有脱出文本流。 但是绝对定位 后，不仅元素盒子会脱出文档流，文字也会脱 出文本流。 那么后面元素的文本就不会再认同它的区域位置，会 直接在它后面布局，不会再环绕。 当然你可以使用 z-index 来让底部的元素到上面来，类似于一个图层的概念。

整体架构流程

css定位分为五个阶段

1.css定位

2.相对定位

3.绝对定位

4.固定定位

5.粘性定位

技术名词解释

• css定位
• CSS 定位属性允许对元素进行定位改变其在页面的位置。
• CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
• 普通流中的元素的位置由元素在 HTML 中的位置决定。
• 相对定位
• 相对盒子自己原来的位置进行调整，称为相对定位
• 绝对定位
• 绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置
• left：到左边的距离； right：到右边的距离； top：到顶部的距离； bottom：到底部的距离 值 可为负，为负时向相反方向移动
• 绝对定位的元素脱离标准文档流
• 绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们 进行压盖
• 绝对定位的参考盒子
• 绝对定位的盒子并不是永远以浏览器作为基点
• 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点，这个盒子 通常是相对定位的，所以这个性质也叫做子绝父相 绝对定位盒子的垂直居中

•  堆叠顺序 z-index属性

• 决定盒子的层级顺序，值为数字，没有单位，数值大的将覆盖数字小的部分

• 固定定位

• 固定定位：不管页面如何滚动，他都永远固定在那里

• 粘性定位

• (这是 css3 新增的属性值)粘性定位。最初会被当作是relative，相对于原来的位置进行偏移； 一旦超 过一定阈值之后，会被当成 fixed定位，相对于视口进行定位。position:sticky ，其支持还不是很普 遍。

小结

提供先进的推理，复杂的指令，更多的创造力。