Home >Web Front-end >HTML Tutorial >overflow: Examples of hidden and absolute positioning application scenarios_html/css_WEB-ITnose
overflow: Examples of hidden and absolute positioning application scenarios_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:081268browse
Make a click to view the effect of displaying detailed information.
Let’s talk about the problem description. The outermost parent element overflow-parent has overflow:hidden set,
Then the child element overflow-child does not set overflow, but sets relative, which contains the absolute The position of the positioned element is determined. When this element is clicked, the height increases to 300px. 🎜> Next click on this absolutely positioned element, the effect is as follows, we find that there is no more than the included final parent element overflow-parent.
<!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> Then remove the overflow of overflow-parent. Well, the conclusion is that when we do this absolute positioning and stacking, must determine whether all its ancestor elements are included overflow:hiden attribute
, otherwise, you will find that no matter how you set it, it will not be fully displayed.