absolute强大的高级运用

1、absolute超越overflow布局

父元素有overflow:hidden/overflow:auto而且不须要position:relative,性能

position:absolute与margin结合就OK了。优化

2、absolute无依赖性、跟随性的绝对定位。图片

1)、图片图标来覆盖文档

2)、如何定位下拉框it

3)、对齐居中或边缘io

4)、星号时有时无容器

5)、图文对齐兼容兼容性

6)、文字溢出扩展

3、absolute脱离文档流

z-index无依赖而且标准:

1)、若是只有一个绝对定位元素,天然不须要z-index。自动覆盖普通元素

2)、若是两个绝对定位,控制DOM流先后顺序达到须要的覆盖效果,一日无z-index

3)、若是多个绝对定位交错,很是很是少见,z-index:1控制

4)、若是非弹框类的绝对定位元素z-index>2,一定z-index冗余,请优化。

4、absolute与width和height

1)、容器无需固定width/height值内部元素亦可拉伸

2)、容器拉伸,内部元素支持百分比width/height值

5、absolute实现网页的总体布局

你会发现:兼容性好,自适应强,扩展方便,性能优异,能够方便实现诸多效果,适合移动端,PC端一样精彩。

相关文章
相关标签/搜索