深入理解css之absolute

在慕课网上看到的张鑫旭大神的视频，做的笔记，以便日后翻看。

绝对定位与float

　　　1.绝对定位和float有一样的特性，都有包裹性，和破坏性。

　　　2.absolute和relative
　　　　如果不把他们俩放在一起，absolute越独立越强大。
　　　　relative和absolute是分离的，对立的，绝不是什么兄弟关系！
　　　　独立的absolute可以摆脱overflow的限制，无论是滚动还是隐藏
　　　　<div class="scroll">
　　　　　　<a href="javascript:;" class="close" title="关闭"></a>
　　　　　　<img src="mm1" />
　　　　　　<img src="mm2" />
　　　　　</div>
　　　　当两个图片高度超出容器大小时，这里的a标签里面是禁止不动的。
　　3.无依赖的absolute定位
　　　无依赖的意思
　　　　不受relative限制的absolute定位，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值！
　　　　定位的行为表现
　　　　1.脱离文档流
　　　　2.保持占位
　　absolute特性表现
　　　　1.去浮动
　　　　2.位置跟随
　　配合margin的精确定位
　　　　1.支持负值定位
　　　　2.超赞的兼容性
　　4.实例
　　　　1.图片图标绝对定位覆盖
　　　　<a>求课<i class="icon-hot"></i></a> .icon-hot{position:absolute;width:28px;height:11px;margin:-6px 0 0 2x;background:url();}
　　　　用margin负值和position实现。

　　　　2.下拉框最佳实践
　　　　<div>
　　　　　　<ul>
　　　　　　　　<li></li>
　　　　　　　　<li></li>
　　　　　　　　<li></li>
　　　　　　</ul>
　　　　</div>
　　　　.ul{position:absolute;width:260px;margin:39px 0 0 -1px;padding-left:0;list-style-type:none;border:1px solid #ccc;background-color:#fff;box-shadow:0px 1px 2px #d5d7d8;font-size:12px;}
　　　　3.居中以及边缘对齐定位
　　　　　　<div>
　　　　　　　　&nbsp;<img src="loading.gif" class="course-loading" />
　　　　　　</div>
　　　　　　div{text-align:center;}
　　　　　　img{position:absolute;margin-left:-26px;}-26是图片自身宽度的一半
　　　　　　这里之所以会居中显示是因为，&nbsp;是个占位符，也是个字符。text-align是对这个空格起作用的。
　　　　4.各种对齐溢出技巧
　　　　　　表单注册的时候的*可以考虑使用position:absoluter实现绝对定位，margin-left:负值
　　　　　　表单前面的图表可以使用position:absoluter实现
　　　　　　使用绝对定位后的溢出不会被截取，超出后不会被截取
　　　　　　总结：无依赖绝对定位为页面布局与重构提供了更加广阔的选型新思路
　　　　5.脱离文档流
　　　　　　回流与重绘，动画尽量作用唉绝对定位元素上
　　　　　　两个absolute时候遵循后来者居上的原则 z-index潜在误区，误区：绝对定位元素都需要z-index控制层级，确定显示的垂直位置。
　　　　　　绝对定位和z-index无依赖
　　　　　　　　1.如果只有一个绝对元素定位元素，自然不需要z-index自动覆盖普通元素
　　　　　　　　2.如果两个绝对元素，控制DOM六的前后顺序达到需要的覆盖效果，依然无z-index;
　　　　　　　　3.如果多个绝对定位交错，非常少见，z-index:1控制
　　　　　　　　4.如果非弹框类的绝对定位元素z-index>2必定z-index冗余，请优化
　　　　　　　　6.绝对定位的left/right/top/bottom
　　　　　　　　　　这些属性都要配合使用，双双配对的。如果设置了left:0;top:0;盒子就会位于窗口的左上角。
　　　　　　　　　　当父容器有relative/absolute/fixed/sticky是绝对定位会根据父元素来计算。
　　　　　　　　　　当只设置一个属性的时候，它只能在一个方向上起作用。
　　　　　　　　　　当四个属性同时设置的时候，如果不设置宽高，会把容器拉开。设置了宽高后，优先left,top
　　　　　　　　7.left/top/right/bottom与width/height
　　　　　　　　　　实现一个全屏自适应的50%黑色半透明遮罩层。
　　　　　　　　　　通常是
　　　　　　　　　　　　.overlay{
　　　　　　　　　　　　　　　　position:absolute;
　　　　　　　　　　　　　　　　width:100%;
　　　　　　　　　　　　　　　　height:100%;
　　　　　　　　　　　　　　　　left:0;
　　　　　　　　　　　　　　　　top:0;
　　　　　　　　　　　　}
　　　　　　　　　　另外的实现方案：
　　　　　　　　　　　　.overlay{
　　　　　　　　　　　　　　position:absolute;
　　　　　　　　　　　　　　left:0;
　　　　　　　　　　　　　　top:0;
　　　　　　　　　　　　　　right:0;
　　　　　　　　　　　　　　bottom:0;
　　　　　　　　　　　　}
　　　　　　　　　没有任何宽度，没有高度。实现宽高满屏效果
　　　　　　　　　　首先，相互替代性
　　　　　　　　　　很多情况下，absolute的翅膀拉伸和width/height是可以相互替代的。
　　　　　　　　　　position:absolute;left:0;top:0;width:50%;
　　　　　　　　　　等同于
　　　　　　　　　　position:absolute;left:0;top:0;right:50%;
　　　　　　　　　　注意：爆裂拉伸特性IE7+支持

　　　　　　　　　　差异所在-拉伸更强大
　　　　　　　　　　　　实现一个距离右侧200像素的全屏自适应的容器层。
　　　　　　　　　　　　使用拉伸直接：
　　　　　　　　　　　　position:absolute;left:0;right:200px;
　　　　　　　　　　　　但是，width只能使用CSS3 calc计算
　　　　　　　　　　　　position:absolute;left:0;width:calc(100%-200px);
　　　　　　　　　　相互支持性
　　　　　　　　　　　　1.容器无需固定width/height值，内部元素亦可拉伸；
　　　　　　　　　　实现遮罩层
　　　　　　　　　　　　2.容器拉伸，内部元素支持百分比width/height值。
　　　　　　　　　　　　　　通常状况 元素百分比height要想起作用，需要父容器的height值不是auto
　　　　　　　　　　　　　　绝对定位拉伸下，即使父级容器的height值是auto，只要容器绝对定位拉伸形成，百分比高度值也是支持的。
　　　　　　　　　　　　　　高度自适应布局:
　　　　　　　　　　　　　　.page{
　　　　　　　　　　　　　　　　position:absolute;
　　　　　　　　　　　　　　　　left:0;
　　　　　　　　　　　　　　　　top:0;
　　　　　　　　　　　　　　　　right:0;
　　　　　　　　　　　　　　　　bottom:0;
　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　.list{
　　　　　　　　　　　　　　　　float:left;
　　　　　　　　　　　　　　　　height:33.3%;
　　　　　　　　　　　　　　　　width:33.3%;
　　　　　　　　　　　　　　　　position:relative;
　　　　　　　　　　　　　　}
　　　　　　　　　　　　当left:0;right:0;width:50%时，的实际宽度是50%而不是100%
　　　　　　　　合作性。
　　　　　　　　当尺寸限制，拉伸以及margin：auto同时出现的时候，就会有绝对定位元素的绝对居中效果！
　　　　　　　　8.absolute网页整体布局 适合移动web的布局策略
　　　　　　　　　　与fixed，relative一样，absolute设计的初衷确实是定位。
　　　　　　　　　　与fixed，relative不同的是，absolute包含更多特有且强大的特性。如果仅仅是使用其实现一些覆盖与定位，则大材小用了。

　　　　　　　　absolute与整体布局
　　　　　　　　　　1.body降级，子元素升级
　　　　　　　　　　　　升级的子div类名.page{position:absolute;left:0;top:0;right:0;bottom:0}
　　　　　　　　　　　　绝对定位受限于父级，因此
　　　　　　　　　　　　html,body{height:100%}才能起作用
　　　　　　　　　　2.各模块-头尾，侧边栏各居其位
　　　　　　　　　　　　header,footer{position:absolute;left:0;right:0;}
　　　　　　　　　　　　header{height:48px;top:0;}
　　　　　　　　　　　　footer{heigth:52px;bottom:0;}

　　　　　　　　　　　　aside{width:250px;position:absolute;left:0;top:0;bottom:0;}
　　　　　　　　　　3.内容区域想象成body
　　　　　　　　　　　　.content{
　　　　　　　　　　　　　　position:absolute;
　　　　　　　　　　　　　　top:48px;
　　　　　　　　　　　　　　bottom:52px;
　　　　　　　　　　　　　　left:250px;
　　　　　　　　　　　　　　overflow:auto;
　　　　　　　　　　　　}
　　　　　　　　　　此时的头部尾部以及侧边栏都是fixed效果，不跟随滚动，避免了移动端position:fixed实现的诸多问题。