【前端面经】CSS 定位有哪些？

CSS 定位

五种定位及其区别

特性	静态定位	相对定位	绝对定位	固定定位	粘性定位
位置参考	默认情况	相对自己原来位置	参考自己包含块（第一个定位的祖先元素）	参考自己的视口	参考最近的一个拥有滚动机制的祖先元素（如父元素设置 overflow: scroll）
开启方式	position: static	position: relative	position: absolute	position: fixed	postition: sticky
是否脱离文档流	否	否	是	同绝对定位	否
能否继续浮动	是	能（不推荐）	否（如果设置则浮动失效）	同绝对定位	能（不推荐）
能否 margin 调整位置	是	能（不推荐）	能（不推荐，只有设置 top 属性，margin-top 才有效，其他三方向亦然）	同绝对定位	能（不推荐）
其他	不受 left、right、top、bottom 的影响，元素也不属于定位元素		绝对定位的元素在其包含块的 padding + content 范围内布局		粘性定位在元素到达某个位置时将其固定，在其父元素离开对应位置时一起离开

定位元素的特点

• 定位（无论什么定位）的元素的特点是：默认宽、高都被内容撑开，也可以自由设置宽高
• 定位的元素都可以通过 left、right、top、bottom 调整位置。left 和 right 不能同时设置，top 和 bottom 不能同时设置。
• 定位的元素的显示层级都比普通元素高。各种定位的元素的显示层级是一样的。后定位的元素会覆盖在先定位的元素上边。可以使用 z-index 设置定位的元素的显示层级。

什么是文档流

文档流是指网页元素在没有任何定位或浮动的情况下，按照 HTML 结构依次排列的方式。默认情况下，块级元素会垂直排列，占据其父容器的全部宽度，而行内元素则会水平排列，直到一行放不下才会换行。