CSS 简明教程 - 位置属性 ( position ) - 简单教程，简单编程

CSS position 属性用于指定元素的不同定位模式

position 属性的可选值有 5 个，分别如下

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

如果元素已设置 position 属性 ( static 除外 )，则可以通过设置 top，left，bottom 和 right 属性来更改元素的位置

当然，这些属性基于不同的定位模式以不同的方式工作

不定位 `position: static;`

这是 HTML 元素的默认定位模式，即 无定位

元素将根据其类型在默认位置显示在文档中，通常，块级元素将从上到下垂直显示，并且内嵌元素将水平显示，有关元素显示方式的更多信息，请参阅 CSS 简明教程 - 显示和可见属性

如果我们不为元素设置 position 属性或将 position 属性设置为 static ，则 top，left，bottom 和 right 属性不会影响元素的位置

下面是一个示例

div.static {
    position: static;
    border: 2px solid red;
    top: 30px;
}

正如你所看到的那样，top 属性并不会影响元素的位置

相对定位 `position: relative;`

如果我们将元素的 position 属性设置为 relative，则元素将相对于其默认位置定位

这时候，我们可以设置 top，left，bottom 和 right 属性来更改元素相对于其默认位置的偏移量

例如

h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

但是，页面仍保留元素偏移后留下的空白区域，且这些空白空间不会被其它元素占用

下面的示例很好的说明了这一点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单教程 ( www.twle.cn )</title>
<style>
h2.pos_top
{
    position:relative;
    top:-50px;
}
</style>
</head>

<body>
<h2>这是头部，不会有定位</h2>
<h2 class="pos_top">该元素会距离它的默认位置向上偏移 50 像素</h2>
<p>这是一个正常的段落</p>
</body>
</html>

相对定位的元件通常用作绝对定位元件的容器

绝对定位 `position:absolute`

如果我们将元素的 position 属性设置为 absolute，那么元素将相对于最近设置了定位 ( positioned ) 的祖先元素定位

如果没有祖先元素，则它将相对于 <body> 元素定位

绝对定位元素的位置独立于文档流，因此它不占用文档流的空间，这与相对定位完全不同

注意：「 positioned 」元素是指已设置 position 属性的元素（ static 除外）

下面的代码是一个示例

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`

如果我们将元素的 position 属性设置为 fixed ，则元素将固定到相对视图中的某个位置，并且在页面滚动时不会移动

在这种定位模式下，我们可以设置 top，left，bottom和 right 属性以确定元素的初始位置

下面的代码是一个示例

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 200px;
    border: 2px solid red;
}

注意：你应该声明 <!DOCTYPE html> 以支持 IE7 和 IE8 中的 position:fixed 定位

固定定位的元素不占用空间，因为其位置独立于文档流

固定定位的 HTML 元素可以与其它 HTML 重叠

粘定位模式 `position:sticky`

如果我们将元素的 position 属性设置为 sticky，则元素的定位模式将随页面滚动而改变

通过页面滚动，元素的定位模式将在相对 relative 和固定 fixed 之间切换，具体取决于它是否在视图窗口中

position：sticky 属性需要同时设置 top，left，bottom，right属性中的至少一个才能起作用

下面的代码是一个示例

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

注意：Internet Explorer，Edge 15 和早期 IE 版本不支持 position：sticky 定位，而在Safari 中则需要添加 -webkit- 的前缀

CSS 简明教程 - 位置属性 ( position )

不定位 position: static;

相对定位 position: relative;

绝对定位 position:absolute

固定定位 position:fixed

粘定位模式 position:sticky

不定位 `position: static;`

相对定位 `position: relative;`

绝对定位 `position:absolute`

固定定位 `position:fixed`

粘定位模式 `position:sticky`