Rumah > hujung hadapan web > html tutorial > overflow:hiddden与绝对定位的应用场景的事例_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:39:08
asal
1266 orang telah melayarinya

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

说一下问题描述,最外面的父元素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>
Salin selepas log masuk

 

效果图:

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

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

 

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan