CSS之absolute
position:absolute, 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。
-
absolute和float兄弟关系
- 具有相同的特性表现。
float具有包裹性和破坏性，包裹性实现文字环绕效果，破坏性使父容器高度塌陷 - 很多页面布局可以相互替换
float:leftposition:absolute
-
absolute和relative
- 无兄弟关系，是分离的，absolute越独立越强大
- 独立的absolute可以摆脱overflow的限制，无论是滚动还是隐藏
<style>
.page{
overflow: auto;
border: 5px solid blueviolet;
left:0;
top:0;
width: 400px;
height: 300px;
}
img{
position: absolute;
}
</style>
<body>
<div class="page">
<img src="4.jpg">
</div>
</body>
-
无依赖的absolute定位
- 无依赖
不受relative限制的absolute定位，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值，绝对定位元素不占据任何宽高 - 定位的行为表现
脱离文档流 - 去浮动
absolute生效时浮动是无效的 - 位置跟随
在普通元素时在什么位置水平，position:absolute后还是什么位置，block/inline-block/inline. 但在IE7下，任何元素absolute化都会inline-block化 - 绝对定位进行精确定位
配合margin
（1）支持负值定位
（2）兼容性强 -IE6
-
脱离文档流
动画尽量用在绝对定位元素上，不会影响其他元素 -
absolute与width/height
绝对定位方向是对立的时候，会实现拉伸效果
- 很多情况下，absolute的拉伸和width/height是可以相互替代的
- absolute的拉伸效果更强
- 如果absolute拉伸和width/height尺寸同时存在，width/height设置的尺寸大于left/top/bottom/right设置的尺寸
- 当尺寸限制、拉伸以及margin：auto同时出现的时候，就会有绝对定位元素的绝对居中效果（IE8+）
CSS之relative
-
relative和absolute的相煎关系
- 同源性：
position: relative;position: absolute; - relative对absolute的限制作用：
（1）限制left/top/right/bottom定位
（2）限制z-index层级取决于外部position: relative的层级（z-index：1/2/...确定的数字）
（3）限制在overflow下的嚣张气焰
对元素使用position: absolute;那么同时使用overflow: hidden/auto/scroll是不起作用的
如果父元素有relative，那absolute的元素将不能抵抗overflow的影响
-
relative和定位
-
定位的两个特性：
（1）相对自身top: 0; left: 0;位置不动，因为他是相对于自身定位 absolute相对于边界
（2）无侵入 relative定位不会影响其他元素的布局 -
top/bottom,left/right同时设置时的表现:
绝对定位是拉伸
相对定位是斗争
只有top或者left起作用
-
relative和层级
- 提高层叠上下文
position: relative可以提高层级，并且其他提高层级效果没有relative高 - 如果relative所在元素设置z-index：auto 则不能限制内部absolute元素层叠的问题
-
relative的最小化影响原则
- 尽量避免使用relative，不会有元素层叠影响
- relative最小化原则 独立出一个div 加relative，不会占据任何尺寸
