CSS 属性

css position 属性详解

CSS 属性大全 CSS 属性大全


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

位置属性

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

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

position:fixed

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

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

这个 <div> 元素属性有 position: fixed;

CSS 代码如下:

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

position:absolute

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

这是一个简单的例子:

这个 <div> 元素有 position:relative;
这个 <div> 元素有 position: absolute;

这是使用的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 是相对于其正常位置进行定位。设置相对定位元素的 toprightbottomleft 属性会导致它被调整到远离其正常位置。其他内容不会被调整以适应元素留下的任何间隙。

这个 <div> 元素有 position:relative;

这是使用的 CSS:

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

position:static

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

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

这个 <div> 元素有 position:static;

这是使用的 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;
}