[关闭]
@EncyKe 2015-10-22T14:40:45.000000Z 字数 1644 阅读 1620

CSS:绝对定位特辑

CSS 前端


1. 简介

特性:
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作为值。

3. 绝对定位拉伸

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

  1. .prev,.next{
  2. width:50%;
  3. *background-image:url(about:blank);
  4. position:absolute;top:0;bottom:0;
  5. outline:none;
  6. }
  7. .prev{cursor:url(pic_prev.cur),auto;left:0;}
  8. .next{cursor:url(pic_prev.cur),auto;right:0;}

4. 绝对定位的整体布局

效果:headerfooter固定,中部文档滑动的全屏自适应网页;
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>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注