定位

相对定位：static/relative

那些脱离文档流的元素，比如设置了浮动获绝对定位的元素不会对相对定位产生影响。

static：在 css 中为元素定义 top、left、right、bottom、z-index 都不会生效（非 static 会生效）。

relative：表现与 static 一样，不过可以通过设置偏移量 top、left、right、bottom 和 z-index 来控制相对于其正常位置进行的偏移。

绝对定位和浮动

两者均具有包裹性和破坏性。
绝对定位的元素有以下几个特点：

• 块级元素的宽度在未定义时不在是 100%，而是根据内容自动调整
• 在不定义 z-index 的情况下，absolute 元素会覆盖在其他元素之上
• 它会脱离正常的文档流，不在占据空间，类似于浮动后的效果。

绝对定位生效时，浮动无效。

绝对定位和 relative

注意：relative 和 absolute 是分离的、对立的。而且，如果 absolute 不依赖 relative（不将绝对定位的父级元素设置 relative），则 absolute 更强大

不受 relative 限制的 absolute 定位，行为表现上不使用 top/right/bottom/left 任何一个属性或使用 auto 作为值。

定位的行为表现

脱离文档流和去浮动及位置跟随。

位置跟随：即将绝对定位的元素，如果原本是 block 水平的元素，跟在文字后面，则在另一行显示；如果这个元素原本是 inline/inline-block 水平的元素，跟在文字后面，那么，当设置绝对定位后，依然跟在文字后面。

在 chrome 浏览器下，一个元素如果绝对定位后，改变 display:block 时，是不会有任何渲染的，但是如果同时设置 display:block 的话则会改变。

在 IE7 浏览器下，任何元素绝对定位后，都会 inline-block .解决方法，在设置绝对定位元素外设置空 div 包裹着绝对定位元素。

配合 margin 的精确定位支持负值定位和具有很好的兼容性（能兼容 IE6 ）

不依赖 relative 的 absolute 相对定位的例子

图片图标使用绝对定位覆盖在其他元素上，不依 赖position：relative 实现的效果很好。对于不依赖 relative 的绝对定位，元素的位置很重要。

用 text-align 属性控制无依赖绝对定位元素的居中或边缘定位效果。

例如：

居中：父容器设置 text-align:center。居中元素前可借助一个 nbsp; 居中元素设置绝对定位，再借助 margin 值调整。

动画尽量作用于绝对定位元素上（不影响其他元素）。

绝对定位与 z-index

会有人误认为，绝对定位元素都需要 z-index 控制层级，确定其显示的垂直位置。
绝对定位的处置空间的层级规则是后来居上。

1. 如果只有一个绝对定位元素，自然不需要 z-index，自动覆盖普通元素；
2. 如果两个绝对定位元素，控制 DOM 流的前后顺序达到需要的覆盖效果，依然无 z-index；
3. 如果多个绝对定位交错，非常非常少见，z-index:1 控制；
4. 如果非弹框类的绝对定位元素 z-index>2，必定 z-index 冗余，需要优化。

left/top/right/bottom 与 width/height

两者具有相互替代性

例如：
已知页面已有样式

html，body{height:100%;}

如何实现一个全屏自适应的50%黑色半透明遮罩层，如何实现？

通常技术方案：

.overlay{
    position:absolute;
    width:100%;
    height:100%;
    top:0;left:0;
    ...
}

用 left/top/right/bottom 替代:

.overlay{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

没有宽度（width）没有高度（height）实现宽高满屏效果

绝对定位方向如果是对立的，如：left 和 right，top 和 bottom 的时候，结果不是瞬间位移，而是进行拉伸。也就是说，在很多情况下， absolute 的拉伸和 width/height 是可以相互替代的。

如：

position：absolute；left：0；top:0;width:50%;

等同于

position：absolute。left:0;top:0;right:50%;

绝对定位的拉伸特性是 IE7+ 支持

拉伸更强大。

例如：

实现一个距离右侧 200px 的全屏自适应的容器层，如何实现？

使用拉伸：

position：absolute;left:0;right:200px;

如果用 width：

position:absolute;left:0;width:calc(100%-200px);

两者具有支持性

1、容器无需固定 width/height 值，内部元素亦可拉伸。

css 驱动的左右半边翻图预览效果

.prev, .next{
    width:50%;
    *background-image:url(about:blank);
    position:absolute;
    top:0;
    bottom:0;
    outline:none;
}
.prev{
    cursor:url(pic_prev.cur),auto;left:0;
}
.next{
    cursor:url(pic_next.cur),auto;right:0;
}

2、 容器拉伸，内部元素支持百分比 width/height 值；

通常情况：元素百分比 height 要想起作用，需要父容器的 height 值不是 auto。

绝对定位拉伸情况：即使父级元素容器的 height 值是 auto，只要容器绝对定位拉伸行程，百分比高度也是支持的。

应用：
百分比高度自适应

.page{
    position:absolute;
    left:0;top:0;right:0;bottom:0;
}
.list{
    float:left;
    height:33.3%;
    width:33.3%;
    position:relative;
}

相互合作性

当拉伸和 width/height 尺寸同时存在 width/height 设置的尺寸大于 left/top/right/bottom 拉伸的尺寸。

例如：

position：absolute；top:0;left:0;right:0;width:50%;

实际宽度是 50% 而不是 100%；

当遭遇margin：auto的时候，两者的合作性就体现出来了。

当尺寸限制、拉伸以及 margin:auto 同时存在时，就会有绝对定位元素的绝对居中效果。 （IE8+ 支持）

absolute 网页整体布局：适合移动 web 的布局策略

摆脱狭义的定位

与 fixed，relative 一样， absolute 设计的初衷确实是定位（position），但与 fixed，relative 不同的是，absolute 包含更多特有且强大的特性，如果仅仅是使用其实现一些覆盖与定位，则未免大材小用了。不如发挥其潜力，试试使用 absolute 实现网页的整体布局，你会发现：兼容性好，自适应强，扩展方便，性能优异，可以方便实现诸多效果，适合移动端，PC 端效果同样精彩。

absolute与整体布局

1、body 降级，子元素升级

升级的子 div (假设 class=”page” )，满屏
css
.page{position:absolute;left:0;top:0;right:0;bottom:0;}

绝对定位受限于父级，因此，page 想要实现拉伸效果，需要
css
html,body{height:100%;}


2、头、尾、侧边栏（PC 端）的位置固定。

header,footer{position:absolute;left:0;right:0;}
header {height:48px;top:0;}
footer{height:52px;bottom:0;}
aside{width:250px;position:absolute;left:0;top:0;bottom;}

把内容区域想象成 body

.content{
    position:absolute;
    top:48px;
    bottom:52px;
    left:250px;
    overflow:auto;
}

此时的头部、尾部、侧边栏都是 fixed 效果，不跟随滚动，避免了移动端 position：fixed 实现的诸多问题。

全屏覆盖与 page 平级

.overlay{
    position：absolute；
    top:0;right:0;bottom:0:left:0;
    background-color:rgba(0,0,0,0.5);
    z-index:9;
}

<div class=" page"></div>
<div class="overlay"></div>

参考慕课网视频

fixed

使用 fixed 定位的元素，相对于浏览器窗口进行定位，也就是说，不论网页如何滚动，该元素始终停留在屏幕的某个位置上。

IE6 和 IE7 不支持 fixed 属性，以下为兼容性方案：

/*相当于正常的 position：fixed；top:0;*/
.sl-fixed-top{
   bottom: auto;
   top: 0;
   _bottom:auto; 
   _top:expression(eval(document.documentElement.scrollTop));
}
/*相当于正常的 position：fixed；bottom:0;*/
.sl-fixed-bottom{
   bottom: 0;
   top: auto;
   _bottom:auto; 
   _top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
/*相当于正常的 position：fixed;left:0;*/
.sl-fixed-left{
   left: 0;
   _position: absolute;
   right:auto; 
   _left:expression(eval(document.documentElement.scrollLeft));
}
/*相当于正常的 position:fixed; right:0;*/
.sl-fixed-right{
   right: 0;
   left: auto;
   _right:auto; 
   _left:expression(eval(document.documentElement.scrollLeft + document.documentElement.clientWidth - this.offsetWidth-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0)));
}
/*Hack for IE6*/
.sl-fixed-top,.sl-fixed-right,.sl-fixed-bottom,.sl-fixed-left{
    _position:absolute;
}