CSS のオーバーフロー:hidden エラーの解決方法

CSS のオーバーフロー:hidden エラーの解決方法

失敗の原因

今日、カルーセルを書いていたときに、overflow;hidden; が失敗する可能性があることがわかりました。理由は次のとおりです。親要素が、オーバーフローした絶対位置の子要素を非表示にしたい場合、親要素に配置を追加する必要があります。絶対位置の子要素は、配置された親要素を内側から外側に探し、見つからない場合は、overflow:hidden; も失敗するためです。

それをチェックしてください

繰り返しになりますが、上で述べたように、overflow:hidden; が失敗する理由は、親要素がオーバーフローした絶対位置の子要素を非表示にしたい場合、親要素に位置付けを追加する必要があるためです。絶対位置の子要素は、位置付けされた親要素を内側から外側に探し、親要素が見つからない場合は、overflow:hidden; も失敗します。

試してみましょう:

(1)

<スタイル>
    .ラッパー{
        幅: 200ピクセル;
        高さ: 200px;
        背景色: 赤;
        オーバーフロー: 非表示;                 
     }
     。コンテンツ{
         幅: 200ピクセル;
         高さ: 200px;
         背景色: 緑;
         位置: 絶対;
         上: 100px;
         左: 100px;
      }
</スタイル>
<本文>
     <div class="wrapper">
         <div class="content"></div>
     </div>
</本文>

子要素が絶対位置に配置されている場合、overflow:hidden;は無効であることは明らかです。

(2)

<スタイル>
    .ラッパー{
        幅: 200ピクセル;
        高さ: 200px;
        背景色: 赤;
        オーバーフロー: 非表示;      
        位置: 相対的;           
    }
    。コンテンツ{
        幅: 200ピクセル;
        高さ: 200px;
        背景色: 緑;
        位置: 絶対;
        上: 100px;
        左: 100px;
     }
</スタイル>
<本文>
    <div class="wrapper">
        <div class="content"></div>
    </div>
</本文>

親要素に絶対または相対的な位置指定を追加するだけで済みます(ただし、位置指定が絶対の場合、親要素はy軸の下の要素に影響することに注意してください)。これにより、絶対位置指定の子要素が親要素を見つけることができ、overflow:hidden;が失敗しなくなります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  a タグをクリックして入力ファイルのアップロードダイアログボックスを表示する方法

>>:  Facebook 出会い系サイトデザインのユーザー エクスペリエンス分析

ブログ    

推薦する

HTMLを圧縮しない理由はいくつかある

理由は簡単です。 HTML ドキュメントでは、複数の空白文字は 1 つの空白文字と同等です。つまり、...

QTとJavaScript間のインタラクティブデータの実装

1. QTからJSへのデータフロー1. QTはJS関数を呼び出し、JSはパラメータを通じてQTの値を...

マテリアルデザインで水滴アニメーションボタンを実現するための純粋なCSS

序文こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。 これは、Google Mat...

Linux で crond ツールを使用してスケジュールされたタスクを作成する方法

序文Crond は Linux のスケジュール実行ツール (Windows のスケジュールされたタス...

Linux スレッド間の同期と排他制御の知識ポイントのまとめ

スレッドが同時に実行される場合、スレッドがリソースを競合してデータの曖昧さが生じるのを防ぐために、重...

Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明

Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明 Iframe ウェブペー...

MySQL で複数の主キーが定義されているエラーの解決方法

主キーを作成するには 2 つの方法があります。 テーブルテーブル名を作成( フィールド名タイプ、 フ...

mysql8.0.20 のデータディレクトリを移行する方法

mysql のデフォルトのストレージ ディレクトリは/var/lib/mysql/です。以下は、デフ...

LinuxにMySQLをインストールし、外部ネットワークアクセスを構成する例

設定手順1. DNSが設定されているかどうかを確認するDNSが設定されていない場合は、前の記事を参照...

MySQL 5.7 共通データ型

——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...

Mysql 主キー UUID と自動増分主キーの違いと利点と欠点

導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...

CSS は、モバイル端末でクリックされたときに生成された要素の背景色を削除します (推奨)

クリック時に背景色を生成する要素の CSS スタイルに次のコードを追加します。 -webkit-ta...

Avue でカスタム検索バーを実装し、検索イベントをクリアする実践

目次1. 検索バーの内容をカスタマイズする2. 検索ボタンをカスタマイズする検索バーをカスタマイズし...

Vue フロントエンド開発における keepAlive の使用方法の詳細な説明

目次序文keep-avlive フック関数keep-avliveはどのコンポーネントをキャッシュする...

MySQL 5.7 のルートパスワードログイン問題の解決策

前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...