当前位置:Gxlcms > html代码 > overflow:hiddden与绝对定位的应用场景的事例_html/css_WEB-ITnose

overflow:hiddden与绝对定位的应用场景的事例_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:23人阅读

做一个点击查看显示详细信息的效果。

说一下问题描述,最外面的父元素overflow-parent设置了overflow:hidden,

然后子元素overflow-child没有设置overflow,设置了relative,为其包含的绝对定位的元素进行位置确定,这个元素点击时高度增加到300px.

效果图:

接下来点击这个绝对定位的元素,效果如下,我们发现没有超过包含的最终父元素overflow-parent。

然后把overflow-parent的overflow去掉,好了,结论是,我们做这个绝对定位和 堆叠时,要确定下其所有的祖先元素是否包含了overflow:hiden属性,不然的话,会发现无论怎么设置,都不会显示完全。

人气教程排行