-
absolute与width和height： 1.相互替代性 屏幕自适应; .overlay{position:absolute;left:0;top:0;right:0;bottom:0;} 没有宽度(width)没有高度(height)实现宽高满屏效果 position:absolute;left:0;top:0;width:50%; 等同于： position:absolute;left:0;top:0;right:50%; 2.相互支持性 （1）容器无需固定width/height值，内部元素亦可拉伸 （2）容器拉伸，内部元素支持百分比width/height值 通常情况下，元素百分比height要想其作用，需要父级容器的height值不是auto； 绝对定位拉伸下，即使父级容器的height值是auto，只要容器绝对定位拉伸形成，百分比高度值也会死支持的 3.相互合作性 如果拉伸的尺寸和width/height尺寸同时存在，width/height设置的尺寸大于left/top/right/bottom拉伸的尺寸。 因此：position:absolute;top:0;left:0;right:0;width:50%;的实际宽度是50%而不是100%。 当尺寸限制、拉伸以及margin:auto同时出现的时候，就会有绝对定位元素的绝对居中效果！ 注意：居中特效IE8+支持！查看全部
-
z-index无依赖： 1.如果只有一个绝对定位元素，自然不需要z-index，自动覆盖普通元素 2.如果两个绝对定位，控制DOM流的前后顺序达到需要的覆盖效果，依然无z-index 3.如果多个绝对定位交错，非常非常少见，z-index:1 控制 4.如果非弹框类的绝对定位元素z-index>2,必定z-index冗余，请优化！查看全部
-
absolute定位不受relative限制的absolute定位，行为表现上不使用top/right/bottom/left任何一个属性或使用auto作为值! 绝对定位的行为表现： 1.脱离文档流 2.折翼的天使 (1)去浮动 (2)位置跟随查看全部
-
relative和absolute是分离的，对立的，以及absolute越独立越强大！ 1.超越overflow。独立的absolute可以摆脱overflow的限制，无论是滚动还是隐藏查看全部
-
absolute与float相同的特性表现： 1.包裹性(包含内容，不占据整行) 2.破坏性(出现塌陷现象) 页面布局可相互替代查看全部
-
动画尽量作用在绝对定位元素上查看全部
-
注释的原因：消除图片和i标签的空格 在li中插入图片也会遇到li间出现空格的情况，此时的解决方法可以给ul添加属性：font-size:0;查看全部
-
【CSS】【absolute的top/right/bottom/left和width/height】 1.absolute元素使用top/right/bottom/left可以让元素在容器内自由定位，但是遇到属性为position:relative/absolute/fixed/sticky的<div>时，则只能到这一层为止，无法突破这一层。 2.使用top/right/bottom/left实现『拉伸』：(无固定width/height)[IE7+才支持] 当绝对定位的方向是『对立』的(如left和right)，则不是瞬间位移，而是『拉伸』效果 『position:absolute;left:0;top:0;width:50%』 等价于 『position:absolute;left:0;top:0;right:50%』但拉伸更强大 .container { display: inline-block;position: relative;} .cover { position:absolute; left:0; top:0; right:0; bottom:0;background-color:#fff; opacity:.5; filter: alpha(opacity=50); 例：没有宽度和高度声明实现的全屏自适应效果： .overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #000; opacity: .5; filter: alpha(opacity=50); } 例：高度自适应的九宫格效果 .page{position: absolute;left: 0; top: 0; right: 0; bottom: 0;} .list { float: left;height: 33.3%; width: 33.3%;position: relative;} 3.left/right和width同时存在 相互支持性：（1）容器无需固定width/height值，内部元素亦可拉伸(可实现图片上一张/下一张的遮盖层效果)（2）容器拉伸，内部元素支持百分比width/height值。 优先级：width > left/right查看全部
-
对立拉伸，同时设置top/bottom,right/left, 瞬间爆炸，占满屏幕 position:absolute,top:0,left:0,right:0,bottom:0 等价 position：absolute，width：100%，height:100%查看全部
-
Bucuo查看全部
-
为了结构好看<img> <i>会换行显示，用<!-- -->加在中间来消除，空格查看全部
-
注释<!-- -->可以消除，换行后的空白查看全部
-
无依赖的绝对定位Demo查看全部
-
无依赖的绝对定位 跟随性查看全部
-
absolute越独立越强大，超越overflow查看全部
举报
0/150
提交
取消