absolute强大的高级运用
2016-07-18 00:00
211 查看
一、absolute超越overflow
父元素有overflow:hidden/overflow:auto并且不需要position:relative,
position:absolute与margin结合就OK了。
二、absolute无依赖性、跟随性的绝对定位。
1)、图片图标来覆盖
2)、如何定位下拉框
3)、对齐居中或边缘
4)、星号时有时无
5)、图文对齐兼容
6)、文字溢出
三、absolute脱离文档流
z-index无依赖并且标准:
1)、如果只有一个绝对定位元素,自然不需要z-index。自动覆盖普通元素
2)、如果两个绝对定位,控制DOM流前后顺序达到需要的覆盖效果,一日无z-index
3)、如果多个绝对定位交错,非常非常少见,z-index:1控制
4)、如果非弹框类的绝对定位元素z-index>2,必定z-index冗余,请优化。
四、absolute与width和height
1)、容器无需固定width/height值内部元素亦可拉伸
2)、容器拉伸,内部元素支持百分比width/height值
五、absolute实现网页的整体布局
你会发现:兼容性好,自适应强,扩展方便,性能优异,可以方便实现诸多效果,适合移动端,PC端同样精彩。
父元素有overflow:hidden/overflow:auto并且不需要position:relative,
position:absolute与margin结合就OK了。
二、absolute无依赖性、跟随性的绝对定位。
1)、图片图标来覆盖
2)、如何定位下拉框
3)、对齐居中或边缘
4)、星号时有时无
5)、图文对齐兼容
6)、文字溢出
三、absolute脱离文档流
z-index无依赖并且标准:
1)、如果只有一个绝对定位元素,自然不需要z-index。自动覆盖普通元素
2)、如果两个绝对定位,控制DOM流前后顺序达到需要的覆盖效果,一日无z-index
3)、如果多个绝对定位交错,非常非常少见,z-index:1控制
4)、如果非弹框类的绝对定位元素z-index>2,必定z-index冗余,请优化。
四、absolute与width和height
1)、容器无需固定width/height值内部元素亦可拉伸
2)、容器拉伸,内部元素支持百分比width/height值
五、absolute实现网页的整体布局
你会发现:兼容性好,自适应强,扩展方便,性能优异,可以方便实现诸多效果,适合移动端,PC端同样精彩。
相关文章推荐
- Div CSS absolute与relative的区别小结
- relative absolute无法冲破的等级问题解决第1/3页
- CSS定位中Positoin、absolute、Relative的一些研究
- css position: absolute、relative详解
- jQuery获取css z-index在各种浏览器中的返回值
- css定位——position和float的用法详解
- 深入剖析z-index属性
- absolute relative fixed static inherit
- js 图片轮换
- 基于jquery的loading 加载提示效果实现代码
- maven web 工程部署
- CSS定位属性Position详解
- CSS 详细解读定位属性 position 以及参数
- 详解css中position属性
- 彻底掌握Z-index属性
- CSS z-index 的效果
- Java Graphics2D pk (versus) HTML5 canvas - 画国旗
- CSS中 z-index 的介绍
- position的使用方法
- css定位