2021-10-12

为什么要用定位？

定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

组成

定位=定位模式+边偏移
边偏移：top/bottom/right/left

定位模式

静态定位

 .box{ 
    position: static; 
}

特点：

没有特点，相当于标准流

相对定位

.box { 
	position: relative; 
}

特点

1.相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的（自恋型）。

2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

绝对定位

.box { 
	position: absolute; 
}

特点

1.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）
2.父元素没有定位，则以浏览器为准定位（Document 文档）。

固定定位

.box { 
	position:fixed; 
}

特点

1.以浏览器的可视窗口为参照点移动元素。

• 跟父元素没有任何关系
• 不随滚动条滚动。

2.- 固定定位不在占有原先的位置。

• 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

粘性定位–了解

.box { 
	position: sticky; 
}

特点

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加 top 、left、right、bottom 其中一个才有效，跟页面滚动搭配使用。 兼容性较差，IE 不支持。

拓展

绝对定位的盒子居中

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位） 会压住下面标准流所有的内容。

定位特殊特性

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。