absolute强大的高级运用

[亡魂溺海] 提交于 2020-02-29 13:21:49

一、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端同样精彩。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!