ホームページ > 記事 > ウェブフロントエンド > オーバーフロー: 非表示および絶対位置のアプリケーション シナリオの例_html/css_WEB-ITnose
オーバーフロー: 非表示および絶対位置のアプリケーション シナリオの例_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:39:081194ブラウズ
クリックすると、詳細情報の表示効果が表示されます。
問題の説明について話しましょう。 最も外側の親要素 overflow-parent には overflow:hidden が設定されています。
次に、子要素 overflow-child は overflow を設定しませんが、それに含まれる絶対位置要素の位置を決定するために相対的に設定します。この要素をクリックすると、高さが 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:hiden 属性が含まれているかどうかを確認する必要があります。どう設定しても完全に表示されないことがわかりました。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。