CSS之定位

CSS之定位

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

定位=定位模式+边偏移。

定位模式:
定位模式用于指定一个元素在文档中的定位方式。
定位模式通过CSS的posotion属性来设置。

静态定位：默认的定位方式，就是无定位的意思。

相对定位：移动位置的参照点是自己原来的位置。并且设置移动了之后，原来的标准流位置继续占有，后面的盒子任以标准流的方式对待他。

绝对定位：元素在移动位置的过程中，是先对于其父元素(包括更大的父级)来说的。
1.如果没有父元素或者父元素没有定位，则以浏览器为准定位。
2.如果父元素有定位(相对、绝对、固定)，则以最近一级的带有定位的父元素为参考点移动位置。
3.绝对定位不再占有原先的位置。(脱标)

固定定位：固定于浏览器可视区的位置。
1.以浏览器的可视窗口 为参照点移动元素。跟父元素没有任何关系，且不随着滚动条滚动。
2.固定定位不在占有原先的位置。可以看作一种特殊的绝对定位。

子绝父相的由来：
在定位中我们常常使用的方式：
父级需要占有位置，因此使用相对定位；子盒子不需要占有位置，则是绝对定位。
同时，如果父元素不在占有位置，子绝父绝的形式也会出现。

边偏移：
边偏移决定了该元素的最终位置。有以下四种属性。

粘性定位：
粘性定位是在我们开始滑动页面时，随着页面进行滚动，当到了设置的固定位置后固定住。
语法格式如下：

{
position: sticky;
top:0;
}

粘性定位是以浏览器的可视窗口为参照点移动元素的，并且会占用原来的位置，必须添加设置固定位置的元素才会有效。

定位叠放次序：
在页面布局的时候，我们经常会遇到盒子重叠的问题，我们可以使用z-index来控制盒子的先后次序。
语法格式如下：

{
	z-index: 1;
}

数值默认是auto，数值越大，盒子越先显示，并且只有定位的盒子才有z-index属性。