CSS 定位 (Positioning) 属性容许你对元素进行定位。
经过使用 position 属性，咱们能够选择 4 种不一样类型的定位，这会影响元素框生成的方式。css
position 属性值的含义：html
static
没有定位，元素出如今正常的流中top, bottom, left, right ， z-index无效
relative
相对于其直接父元素进行定位top,bottom,left,right，z-index有效
absolute
相对于 static 定位之外的第一个父元素进行定位top, bottom, left, right ， z-index 有效
fixed
相对于浏览器窗口进行定位top, bottom, left, right ， z-index 有效web
| 属性 | 描述 |
|---|---|
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中 |
| top | top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移 |
| overflow | 设置当元素的内容溢出其区域时发生的事情 |
| clip | 设置元素的形状。元素被剪入这个形状之中，而后显示出来 |
| vertical-align | 设置元素的垂直对齐方式 |
| z-index | 设置元素的堆叠顺序 |
–引用于http://www.w3school.com.cn/tiy/t.asp?f=csse_position_relative浏览器
固定定位position:fix
不会随浏览器窗口的滚动条滚动而变化总在视线里的元素svg
#a{ width:200px; height:200px; border:1px solid blue; } position:fixed; left:100px; top:100px; }
相对定位position:relative
-
List item定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在;就是说把这个盒子设置为相对定位以后而且离开原来的位置，其余盒子并不会来填充这个位置布局
-
List itemrelative定位的层老是相对于其直接父元素，不管其父元素是什么定位方式code
绝对定位position:absolute
- List item定位为absolute的层脱离正常文本流，但与relative的区别:其在正常流中的原位置再也不存在
- 对于absolute定位的层老是相对于其最近的定义为absolute或relative的父层，而这个父层并不必定是其直接父层
- 对于absolute定位的层,若是其父层中都未定义absolute或relative，则其将相对body进行定位
~~ ~~
通常来讲，咱们会把父布局设为相对定位，子布局设为绝对定位，这样无论父布局怎么变化，总体的布局是不会变化的