了解CSS定位

CSS定位的分类

1、静态定位 默认情况(static)下所有的元素都是静态定位的

2、相对定位 relative

3、绝对定位 absolute

4、固定定位 fixed

CSS定位——相对定位

相对定位的参考点在哪里?

参考点:在自身原来的位置(左上角的点)

特点:“形影分离,老家留坑”

相对定位怎么使用?

一般来说都不会使用相对定位将元素进行大幅度的移动,只用来做元素的微调。

子绝父相(当子元素绝对定位时,父元素使用相对定位)

子绝父绝(固)也是可以的,但是不推荐使用

注意:相对定位不会脱标

CSS定位——绝对定位

绝对定位会脱标

绝对定位的元素脱标之后,没办法补救,所以一定要慎用。

绝对定位的参考点在哪里?

1、如果定位元素的祖先元素中没有任何使用了定位的元素,那么这时候定位元素的参考点是body的左上角。

2、如果定位元素的祖先元素中存在使用了定位的元素(跟定位方式无关),那么这时候参考点是离定位元素最近的并且使用了定位的祖先元素的左上角。

如果一个元素使用了绝对定位,那么此时它的margin值不能是auto。

对于脱标的元素来说,margin值都不能是auto。

绝对定位的常见考点:

绝对定位的参考点如果是body,那么是相对首屏定位的。

CSS定位——固定定位

position: fixed;

特点:脱标

参考点:永远都是浏览器可见区域的左上角

z-index

要注意的点:

1、所有的元素默认z-index都是0

2、只有定位(除开静态定位)的元素设置z-index才有效

没有定位的元素设置z-index是没用的

原文地址:https://www.cnblogs.com/crazier/p/12395641.html