css中的定位的使用

css 定位（position）属性用来对元素进行定位。 定位的基本思想很简单，它允许你相对于元素的正常位置或者相对于父元素、另一个元素甚至浏览器窗口本身的位置来确定该元素的布局位置。 可以让盒子自由地在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子。

定位由定位模式声明和边偏移声明组成，定位模式用于指定元素在文档中的定位方式，边偏移则决定了该元素的位置。

静态定位

position：static;

静态定位是元素的默认定位方式，无定位的意思。静态定位元素按照标准流特性摆放位置，没有边偏移属性。

相对定位

position：relative;

将一个元素设置为相对定位，然后通过设置垂直或者水平边偏移属性，可以让这个元素相对于他的起点进行移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）。相对定位的元素会覆盖标准流的元素。

绝对定位

position：absolute;

设置为绝对定位的元素框会从文档流完全删除，不再占据原来的空间（脱标）。它会以最近的有定位（相对定位、绝对定位、固定定位）的祖先元素作为参考来移动位置。如果没有祖先元素或者祖先元素没有定位，则以浏览器窗口为准进行定位（Document）。

#box_absolute {
  position: absolute;
  left: 30px;
  top: 20px;
}

注意：子绝父相是常用的绝对定位和相对定位搭配使用方法。当我们给一个元素添加绝对定位时，相应的会在其父元素上添加相对定位。

固定定位

position：fixed;

• 固定定位是元素固定于浏览器可视区的位置，以浏览器的可视窗口为参照移动位置。
• 与父元素没有任何关系，不随滚动条滚动。
• 固定定位不占据原先的空间。（脱标，可以看成是特殊的绝对定位）。

粘性定位

position：sticky;

• 粘性定位可以看作是相对定位和固定定位的混合使用。
• 以浏览器可视窗口为参照移动位置（固定定位的特点）。
• 占据原先的位置，没有脱标（相对定位的特点）。
• 必须添加其中一个边偏移属性才有效。

注意：此时粘性定位的边偏移不是指元素的移动位置，而是指元素在随滚动条滚动最后所停留的位置。

行内元素添加绝对定位和固定定位后，可以直接设置高度和宽度，块级元素添加定位后如果不设置宽高则由内容撑开。

边偏移属性和 z-index 属性

边偏移属性是一个元素使用定位（position）之后对位置进行调整的属性。

top（right、bottom、left）：定义一个定位元素的上（右、下、左）外边距边界与其定位参考元素的上（右、下、左）边界之间的偏移量。属性值可以是 auto、百分比值（相对包含块）、长度单位数值。

• 如果 position 属性的值为 “static”，那么设置边偏移属性不会产生任何效果（无效）。
• 如果 position 属性的值为 “sticky” ，那么如果没有设置边偏移属性 position属性是无效的。
• 如果 position 属性的值为 “fixed”、“absolute”、“relatiive”，如果没有设置边偏移属性则会默认以它在文档流中的原始位置作为定位。需要注意的是固定定位的元素如果在文档流中的原始位置是在可视窗口外面（需要滚动才能看到）那么没有边偏移是无法看到元素的，因为此时将元素固定到可视窗口的外面了。

z-index：number（整数，可以为负数）; 设置元素的堆叠顺序（层级）的属性，当元素开启定位后就可以使用这个属性。可以将值设置为 auto （默认，堆叠顺序与父元素相等）和 inherit 值。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素上面。如果层级相同，则会按照书写顺序，后来居上。

在给元素开启定位后，元素的 z-index 属性值默认都是 0。