@EncyKe
2015-10-22T14:40:45.000000Z
字数 1644
阅读 2006
CSS
前端
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
完成;
不受relative
限制的absolute
定位,即不使用top/right/bottom/left
任何一个属性或使用auto
作为值。
<!-- -->
可以用来消除两个标签之间的空格,保证两个元素之间完美的贴合,同时保持代码可读性。index-z
定义,则后来居上原则;text-align:center;
的
后放置绝对定位的元素,即可居中。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;}
效果: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>