深入理解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>
<img src="loading.gif" class="course-loading" />
</div>
div{text-align:center;}
img{position:absolute;margin-left:-26px;}-26是图片自身宽度的一半
这里之所以会居中显示是因为， 是个占位符，也是个字符。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实现的诸多问题。
