position简述

一、定义
指定一个元素在文档中的定位方式

1.static 没有定位，元素正常的出现在文档流中；

2.relative 相对定位，针对自己正常位置进行定位；

3.absolute 绝对定位，相对于第一个非static的父元素进行定位，经常搭配relative定位的父元素使用（父相子绝）；

4.fixed 绝对定位，以浏览器窗口定位，常用于固定到浏览器上的工具栏。

二、示例

1.relative

.main{  background-color: #ccc;  }
.position-relative{ width: 100px;   height: 100px;  background-color: #000; position: relative; top: -10px; left: 10px; }
<div class="main"> <div class="position-relative"></div> </div>

2.absolute

.main{  background-color: #ccc; position: relative; } 

.position-absolute{ position: absolute; width: 100px;   height: 100px;  background-color: yellow;   top:0;  }

<div class="main"> <div class="position-absolute"></div> </div>

注意：absolute脱离了正常的文档流，父元素的高度并没有被子元素撑开；

3.fixed

.position-fixed{ width: 100px; height: 100px; background-color: #ccc; position: fixed; top: 10px; right: 10px; }

<div class="position-fixed"></div>