-
【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%查看全部
-
为了结构好看<img> <i>会换行显示，用<!-- -->加在中间来消除，空格查看全部
-
注释<!-- -->可以消除，换行后的空白查看全部
-
无依赖的绝对定位Demo查看全部
-
无依赖的绝对定位 跟随性查看全部
-
absolute越独立越强大，超越overflow查看全部
-
绝对定位的宽高不占据任何位置（宽高为0）查看全部
-
不受relative限制的absolute定位，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值！查看全部
-
默认情况下，body的高度是0查看全部
-
超赞！查看全部
-
<!-- -->消除img和i标签的间隙查看全部
-
绝对定位元素的绝对居中效果查看全部
-
九宫格高度自适应布局查看全部
-
内部拉伸特性应用查看全部
举报
0/150
提交
取消