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- 的前缀
