关于前端: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 其中的一个才无效。