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;(内容多有滚动条)}