CSS position 属性

定位<h2>元素:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    h2 {
      position: absolute;
      left: 100px;
      top: 150px;
    }
  </style>
</head>

<body>
  <h2>这是一个绝对定位了的标题</h2>
  <p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

</html>

尝试一下 »


属性定义及使用说明

position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。

默认值: static
继承: no
版本: CSS2
JavaScript 语法: object.style.position="absolute"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
position 1.0 7.0 1.0 1.0 4.0

属性值

描述
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 属性的值。

更多实例

Position:relative - 这个例子演示了一个元素相对其正常位置如何定位。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    h2.pos_left {
      position: relative;
      left: -20px;
    }

    h2.pos_right {
      position: relative;
      left: 20px;
    }
  </style>
</head>

<body>
  <h2>这是位于正常位置的标题</h2>
  <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
  <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
  <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
  <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
  <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>

尝试一下 »


相关文章

CSS 教程: CSS Positioning