相对定位、绝对定位与固定定位[通俗易懂]

大家好，欢迎来到IT知识分享网。

1. 定位

1.1 相对定位（relative)

​ 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的;

特点：

1. ​ 它是相对于自己原来的位置来移动的（移动位置的时候是参照点是自己原来的位置）；
2. ​ 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）

{ 
   
    position: relative;
	top: ;
    left: ;
    right: ;
    bottom: ;
}

1.2 绝对定位（absolute)（子绝父相）

​ 绝对定位是元素在移动位置的时候，是相对于它父级元素来说的。

特点：

1. ​ 如果没有父级元素或者父级元素没有定位，则以浏览器为准定位（Document文档）；
2. ​ 如果父级元素有定位（相对、绝对、固定定位），则以最近一级的有定位父级元素为参考点移动位置；
3. ​ 绝对定位不再占有原先的位置（脱标）

{ 
   
    position: absolute;
	top: ;
    left: ;
    right: ;
    bottom: ;
}

1.3 固定定位（fixed)

​ 固定定位是元素固定与浏览器可视区的位置。

​ 主要使用场景：可以在浏览器页面滚动时元素的位置不会改变.

特点：

1. 以浏览器的可视窗口为参照点移动元素；
2. 跟父元素没有任何关系；
3. 不随滚动条滚动；
4. 固定定位不再占有原先的位置；
5. 固定定位脱标，也可以看作是一种特殊的绝对定位。

{ 
    position: fixed; }

1.4 定位的叠放顺序

n越大，顺序越在上面

{ 
    z-index: n; }