CSS 布局 - 元素定位

CSS position 属性用于设置一个元素在文档中的定位方式，top，right，bottom 和 left 属性则决定了该元素的最终位置。。

position 属性

position 属性指定用于元素的定位方法的类型。

position 属性的可选值有五种：

• static: 默认的定位方式
• relative: 相对于其正常位置进行定位
• absolute: 最近的已经定位的祖先元素定位
• fixed: 相对于视口定位，保持在在视口的固定位置
• sticky: 基于文档的滚动位置定位

首先通过 position 属性设定元素的定位昂是，然后使用top，right，bottom 和 left 定位元素。

静态定位

默认情况下，HTML 元素是静态定位的。静态定位元素不受 top，right，bottom 和 left 属性的影响。

一般情况下，并不用特意设置元素为 position: static;，因为这就是默认的定位方式。

相对定位

设置为 position: relative; 的元素相对于其正常位置进行定位，top，right，bottom 和 left 属性则设置了偏离其正常位置的距离。

相对定位的元素偏离其正常位置后留下的空间，并不会被其他元素占用。

设置元素相对定位：

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73ad21;
}

绝对定位

设置为 position: absolute; 的元素的位置是相对于最近的已经定位的祖先元素的。

如果绝对定位元素没有已经定位的祖先，则它使用文档正文，并随着页面滚动而移动。

决定定位的元素，不在常规的文档流中，不再占用父元素中的空间，相当于浮在上面一样。

设置元素绝对定位：

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73ad21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73ad21;
}

固定定位

设置为 position: fixed; 的元素相对于视口定位，不随页面一起滚动。top，right，bottom 和 left 属性设置在视口中的位置。

设置元素固定定位：

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73ad21;
}

粘性定位

设置为 position: sticky; 的元素当文档滚动到指定的相对于视口的位置的时候，就会粘在那里。

注意： Internet Explorer 不支持粘性定位。Safari 需要 -webkit- 前缀（请参见下面的示例）。

通过 top 、 right 、 bottom 或 left 指定的值是相对于视口的偏移量。

在此示例中， 当您到达其滚动位置 (top: 0) 时，粘性元素会粘在页面顶部。

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4caf50;
}

重叠元素

当元素被定后，会覆盖其他元素或者被其他元素覆盖。

我们可以通过 z-index 属性设定元素的堆叠顺序，指示元素放在上面还是下面。 z-index 值越大越靠上，越容易覆盖其他元素。

所有 CSS 定位属性