CSS 定位

我们常在网页中看到某个盒子固定在屏幕的某个位置，这种效果用标准流和浮动都无法实现，需要用到的一种布局方式是定位。

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

1、定位组成

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

定位模式 决定元素的定位方式，它通过 CSS 的 position 属性来设置,：

div {
  position: static;        /*静态定位*/
  position: relative;      /*相对定位*/
  position: absolute;      /*绝对定位*/
  position: fixed;         /*固定定位*/
}

边偏移 就是将定位的盒子移动到最终位置。有 top、bottom、left、right 四个属性，分别对应顶端、底部、左侧、右侧的偏移量。

2、静态定位 static

静态定位是元素的默认定位方式。

静态定位按照标准流特性摆放位置，没有边偏移。

3、相对定位 relative

相对定位 是元素在移动位置的时候，相对于自己原来的位置 来说的。

元素设置为相对定位后，原来在标准流的位置继续占有（不脱标），不会影响后面的盒子。

相对定位的元素典型的应用是给绝对定位的元素做父元素。

4、绝对定位 absolute

绝对定位 是元素在移动位置的时候，相对于其祖先元素 来说的。

如果 祖先元素有定位（绝对、相对、固定定位），则以最近一级有定位的祖先元素为参考 点移动位置。

如果 没有祖先元素 或者 祖先元素都没有定位 ，则 以浏览器为准 定位。

绝对定位 不再占有原先的位置（脱标）。

在使用绝对定位时，有个口诀是“子绝父相”，意思是子级使用绝对定位，父级则需要相对定位。

5、固定定位 fixed

固定定位 是元素固定于浏览器可视区域的位置，可以在浏览器页面滚动时使元素的位置不改变。

固定定位 以浏览器可视窗口为参照点 移动元素，跟父元素没有任何关系，不随滚动条滚动。

固定定位也是脱标的，不占有原来的位置。

6、粘性定位 sticky

粘性定位可以认为是相对定位和固定定位的混合。

粘性定位以浏览器的可视窗口为参照点移动元素，但是它占有原先的位置，不脱标。

粘性定位必需添加 top、left、bottom、right 其中的一个才有效。