absolute - fangdiao/Notes GitHub Wiki
#深入理解absolute ####absolute特性表现 1.去浮动,absolute和float不能同时存在,absolute会覆盖掉float
2.无依赖absolute位置跟随,原来在哪儿绝对定位后,位置不改变。居中对齐时可在绝对定位元素前加一个空格符将其居中,absolute元素会跟随显示,利用margin微调,实现居中。同理居左居右都可以实现,巧妙利用display:inline;
3.超越overflow,absolute的元素不会受overflow的影响
####无依赖绝对定位
设置定位祖先元素易出现布局出错,后期调试困难。最好设置无依赖绝对定位,用margin实现相对定位
####absolute解决文字溢出
对元素设置absolute,其容器被破坏,无大小,溢出部分也会正常显示
####定位方向对立
出现对立的定位方向,元素会被拉伸,若元素设置了宽度,则不被拉伸
当尺寸限制(设置宽度),拉伸(定位方向对立),margin:auto;
同时出现时,会有绝对定位元素的绝对居中效果
####absolute与整体布局
1.body降级,子元素升级
.page{position:absolute;top:0;bottom:0;left:0;right:0;}
html,body{height:100%;}
2.各模块-头尾,侧边栏各居其位
header,footer{position:absolute;left:0;right:0;}
header{height:;top:0;}
footer{height:;bottom:0;}
3.内容区域想象成body;
`.content{position:absolute;top:;bottom:;left:;right:;overflow:auto;(内容多有滚动条)}