オーバーフロー: 非表示および絶対位置のアプリケーションシナリオの例_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

オーバーフロー: 非表示および絶対位置のアプリケーションシナリオの例_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:39 AM

クリックすると、詳細情報の表示効果が表示されます。

問題の説明について話しましょう。最も外側の親要素 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 までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7323

Java チュートリアル

1625

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、