CSS学习：position

发表于   |   分类于

定义和用法

position 属性规定元素的定位类型。

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

默认值： static
继承性： no
版本： CSS2
JavaScript 语法： object.style.position=”absolute”

可用的值

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

以上内容原文出处：http://www.w3school.com.cn/cssref/pr_class_position.asp

static

1
2
3
.static {
  position: static;
}
class=”staticstatic 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

relative

1
2
3
4
5
6
7
8
9
10
.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}
class=”relative1”relative 表现的和 static 一样，除非你添加了一些额外的属性。
class=”relative2”在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

fixed

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。

我相信你已经注意到页面右下角的固定定位元素。你现在可以仔细看看它，这里有它所使用的CSS：

1
2
3
4
5
6
7
.fixed {
  position: fixed;
  bottom: 20px;
  right: 100px;
  width: 200px;
  background-color: white;
}

一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。

class=”fixed”Hello！暂时不用关注我哦。

注意：当父级元素有 transform 属性，子级的 fixed 的特性将转换成 absolute

absolute

absolute 是最棘手的 position 值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position 属性的值为 absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。

这里有一个简单的例子：

1
2
3
4
5
6
7
8
9
10
11
12
.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}
class=”relative”这个元素是相对定位的。如果它是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。
class=”absolute”这个元素是绝对定位的。它相对于它的父元素定位。


以上内容只是本人稍加整理，原文出处：http://zh.learnlayout.com/position.html