css position 属性详解

css 的 position 属性用于指定元素的定位方法类型，可选项有 static、relative、fixed、absolute 和 sticky。

位置属性

有如下六种不同的位置值：

• static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
• fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left、top、right 以及 bottom 属性进行规定。
• absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 left、top、right 以及 bottom 属性进行规定。
• relative：生成相对定位的元素，相对于其自身正常位置进行定位。因此，right:188 会向元素的 RIGHT 位置添加 188 像素。
• sticky：基于用户的滚动位置定位。
• inherit：规定应该从父元素继承 position 属性的值。

position:fixed

fixed 值相对于浏览器窗口定位，其意味着即使页面滚动它也始终保持在同一位置。top、right、bottom 和 left 属性用于定位元素。

注意页面右下角的固定元素。

CSS 代码如下：

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

position:absolute

absolute 是相对于 static 定位以外的第一个父元素进行定位。然而，如果绝对定位元素没有定位祖先，则它使用文档正文，并随着页面滚动而移动。

这是一个简单的例子：

这是使用的CSS：

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

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

position:relative

relative 是相对于其正常位置进行定位。设置相对定位元素的 top、right、bottom 和 left 属性会导致它被调整到远离其正常位置。其他内容不会被调整以适应元素留下的任何间隙。

这是使用的 CSS：

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

position:static

默认情况下，HTML 元素是静态定位的。静态定位元素不受顶部、底部、左侧和右侧属性的影响。

没有以任何特殊方式定位的元素；它始终按照页面的正常流程进行定位：

这是使用的 CSS：

div.static {
  position: static;
  border: 3px solid #73AD21;
}

position:sticky

sticky 基于用户的滚动位置定位。

sticky 元素从 relative 切换为 fixed，具体取决于滚动位置。

如下示例：

代码如下：

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