Maison >interface Web >tutoriel HTML >overflow:hiddden与绝对定位的应用场景的事例_html/css_WEB-ITnose
overflow:hiddden与绝对定位的应用场景的事例_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:39:081266parcourir
做一个点击查看显示详细信息的效果。
说一下问题描述，最外面的父元素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>
效果图：
接下来点击这个绝对定位的元素，效果如下，我们发现没有超过包含的最终父元素overflow-parent。
然后把overflow-parent的overflow去掉，好了，结论是，我们做这个绝对定位和 堆叠时，要确定下其所有的祖先元素是否包含了overflow:hiden属性，不然的话，会发现无论怎么设置，都不会显示完全。
Déclaration：
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
Article précédent：form表单中要提交的input为type="button"时怎么提交啊？_html/css_WEB-ITnoseArticle suivant：jQuery: 图片不完全按比例自动缩小_html/css_WEB-ITnose