失敗の原因 今日、カルーセルを書いていたときに、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 ドキュメントでは、複数の空白文字は 1 つの空白文字と同等です。つまり、...
1. QTからJSへのデータフロー1. QTはJS関数を呼び出し、JSはパラメータを通じてQTの値を...
序文こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。 これは、Google Mat...
序文Crond は Linux のスケジュール実行ツール (Windows のスケジュールされたタス...
スレッドが同時に実行される場合、スレッドがリソースを競合してデータの曖昧さが生じるのを防ぐために、重...
Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明 Iframe ウェブペー...
主キーを作成するには 2 つの方法があります。 テーブルテーブル名を作成( フィールド名タイプ、 フ...
mysql のデフォルトのストレージ ディレクトリは/var/lib/mysql/です。以下は、デフ...
設定手順1. DNSが設定されているかどうかを確認するDNSが設定されていない場合は、前の記事を参照...
——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...
導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...
クリック時に背景色を生成する要素の CSS スタイルに次のコードを追加します。 -webkit-ta...
目次1. 検索バーの内容をカスタマイズする2. 検索ボタンをカスタマイズする検索バーをカスタマイズし...
目次序文keep-avlive フック関数keep-avliveはどのコンポーネントをキャッシュする...
前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...