CSS定位属性-position

一、可能的属性值

1.static:默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2.absolute：绝对定位。对象脱离常规流，是基于整个屏幕，生成绝对定位的元素，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。它的父级元素如果设置 relative ,那就就是基于它的父元素的左上角计算。

3.fixed：固定定位。与absolute一致，生成绝对定位的元素，但偏移定位是以浏览器窗口为参考。当出现滚动条时，对象不会随着滚动。没有滚动条的情况下与fixed没有差异

4.relative：相对定位，是相对于自己来定位的，在相对于它原来的位置上进行移动。

 

注：绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute；

　　绝对定位属性 绝对定位非常好用，但切记不要滥用，什么地方都用。

二、left、top、right、bottom 属性

left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

越往右left越大；越往下，top越大；

越往右right越小；越往下，bottom越小

如果‘position’属性的值为‘static’，那么设置‘left’属性不会产生任何效果。

三、示例

.absolute
{
    position: absolute;
    left: 100px;
    right: 100px;
    top: 100px;
    bottom: 100px;
}