CSS：绝对定位特辑

CSS 前端

1. 简介

• absolute与float：某种兄弟关系，有着相同特性的表现：包裹性和破坏性；而两者不可同时存在。
• absolute与relative：两者是分离的、对立的、并不是什么兄弟关系；absolute越独立越强大，即尽量不与relative联用。
• 独立的absolute可以摆脱overflow:scroll/hidden;的限制。

特性：
1. 脱离文档流：悬浮原来位置上方，其宽高不占据任何尺寸；
2. 去浮动：absolute生效时，float失效；
3. 位置跟随：元素原来在什么位置，绝对定位后依然是什么位置；但display：block可能破坏位置顺序；
注意：IE 7会将所有绝对定位的元素设为display：inlien-block，解决办法是在绝对定位元素加一个无意义的属性display：block;的<div>父标签；
4. 精确定位：建议配合margin完成；

2. 无依赖绝对定位

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

• 注释<!-- -->可以用来消除两个标签之间的空格，保证两个元素之间完美的贴合，同时保持代码可读性。
• 动画尽量作用在绝对定位元素上；
• 多个绝对定位元素：若无index-z定义，则后来居上原则；
• 居中：在一个带text-align:center;的 后放置绝对定位的元素，即可居中。

3. 绝对定位拉伸

• left:0;top:0;right:0;bottom:0;可拉伸扩充全屏；取代width:100%;。
• width/height优先级高于拉伸；
• 使用width/height有时可能需要用到calc()，兼容性不佳；
• width/height与拉伸共存时，追加margin:auto;即可实现绝对居中(IE 8+)；

应用：
示例：图片slider的左右按钮

.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_prev.cur),auto;right:0;}

4. 绝对定位的整体布局

效果：header、footer固定，中部文档滑动的全屏自适应网页；
1. body降级，子元素升级(以.page取代body)：

html,
body { 
    height: 100%;
}
.page { 
    position:absolute; 
    left:0; top:0; right:0; bottom:0;
}

2. 各模块的头部、尾部、侧边栏各居其位

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

3. 内容区域想象成body

.content { 
    position:absolute; 
    top: 48px; bottom: 53px; 
    overflow: auto;/*可以避免移动端使用fixed出现的问题*/
}

4. 全屏覆盖,与.page平级

.overlay { /*如菊花图等全屏元素*/
    position:absolute; 
    left:0; top:0; right:0; bottom:0; 
    background-color:rgba(0,0,0,.5); 
    z-index:9;
}

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