Maison > interface Web > tutoriel HTML > overflow:hiddden与绝对定位的应用场景的事例_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:39:08
original
1265 Les gens l'ont consulté

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

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

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

<!doctype html><html><head><script src="jquery-1.9.1.min.js"></script><style>.overflow-parent{    width: 200px;    height: 200px;    border: 1px solid #ccc;    overflow: hidden;}.overflow-child{    position: relative;    width: 100px;    height: 198px;    border: 1px solid blue;}.position{    position: absolute;    right: 10px;    background: #000;    bottom: top;    top: 110px;    z-index: 100;    width: 50px;    height: 50px;    }.height{    height:300px;}</style><script>function addHeight(htmlObj){    $(htmlObj).toggleClass("height");}</script></head><body><div class="overflow-parent">    <div class="overflow-child">        <div class="position" onclick="addHeight(this)">                    </div>        </div></div></body></html>
Copier après la connexion

 

效果图:

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

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

 

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal