CSS のオーバーフロー:hidden エラーの解決方法
|
失敗の原因 今日、カルーセルを書いていたときに、overflow;hidden; が失敗する可能性があることがわかりました。理由は次のとおりです。親要素が、オーバーフローした絶対位置の子要素を非表示にしたい場合、親要素に配置を追加する必要があります。絶対位置の子要素は、配置された親要素を内側から外側に探し、見つからない場合は、overflow:hidden; も失敗するためです。 それをチェックしてください 繰り返しになりますが、上で述べたように、overflow:hidden; が失敗する理由は、親要素がオーバーフローした絶対位置の子要素を非表示にしたい場合、親要素に位置付けを追加する必要があるためです。絶対位置の子要素は、位置付けされた親要素を内側から外側に探し、親要素が見つからない場合は、overflow:hidden; も失敗します。 試してみましょう: （１）
<スタイル>
.ラッパー{
幅: 200ピクセル;
高さ: 200px;
背景色: 赤;
オーバーフロー: 非表示;
}
。コンテンツ{
幅: 200ピクセル;
高さ: 200px;
背景色: 緑;
位置: 絶対;
上: 100px;
左: 100px;
}
</スタイル>
<本文>
<div class="wrapper">
<div class="content"></div>
</div>
</本文>
子要素が絶対位置に配置されている場合、overflow:hidden;は無効であることは明らかです。
（２）
<スタイル>
.ラッパー{
幅: 200ピクセル;
高さ: 200px;
背景色: 赤;
オーバーフロー: 非表示;
位置: 相対的;
}
。コンテンツ{
幅: 200ピクセル;
高さ: 200px;
背景色: 緑;
位置: 絶対;
上: 100px;
左: 100px;
}
</スタイル>
<本文>
<div class="wrapper">
<div class="content"></div>
</div>
</本文>
親要素に絶対または相対的な位置指定を追加するだけで済みます（ただし、位置指定が絶対の場合、親要素はy軸の下の要素に影響することに注意してください）。これにより、絶対位置指定の子要素が親要素を見つけることができ、overflow:hidden;が失敗しなくなります。
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: a タグをクリックして入力ファイルのアップロードダイアログボックスを表示する方法
>>: Facebook 出会い系サイトデザインのユーザー エクスペリエンス分析
推薦する
MySQL で lower_case_table_names を記録する際の落とし穴の詳細な説明
1 原因プロジェクトがデータベースを移行して再起動した後、「T_AAAテーブルが存在しません」という...
美しいチェックボックススタイル（複数選択ボックス）はIE8/9/10、FFなどと完全に互換性があります。
恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、Baidu で長い...
Vueはタブ切り替えを実装します
この記事では、タブ切り替えを実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...
MySQL innodb_autoinc_lock_mode について
innodb_autoinc_lock_mode パラメータは、auto_increment 列を持...
Vue はカスタム「モーダル ポップアップ ウィンドウ」コンポーネントのサンプル コードを実装します
目次序文レンダリングサンプルコード要約する序文ダイアログ ボックスは非常に一般的なコンポーネントであ...
フロントエンドエンジニアが作ったクールなインタラクティブウェブサイトを推薦します
ウェブサイトリンク: http://strml.net/サミュエル・リード著ヒント: 昨日、Mome...
Portainer を使用して Docker のビジュアル インターフェースを構築する方法
ポーテナーの紹介Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な...
コンピュータが予期せずシャットダウンした後、VMware で Linux がインターネットに接続できない問題の解決策
問題の説明: Linux システムのネットワーク カード ファイル /etc/sysconfig/n...
Node.js+expressメッセージボード機能実装例
目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...
MySQL Undo ログと Redo ログの概要
目次元に戻すログUNDOログの生成と破棄UNDOログの保存元に戻すログ機能トランザクションの原子性の...
HTML ボディタグと HTML でよく使われる制御タグの詳細な説明
1. <body> タグ: Web ページの本体をマークするために使用されます。body...
入力タグの名前と値の違い
type はブラウザでの入力と出力に使用されるコントロールです (たとえば、type="t...
Vueは3階層メニューを再帰的に実装する
この記事の例では、3階層メニューを再帰的に実装するVueの具体的なコードを参考までに共有しています。...
MySQL トランザクション自動コミット自動コミット操作
MySQL のデフォルトの動作モードは自動コミット モードです。つまり、明示的にトランザクションを開...
nginx を https をサポートするように設定するためのサンプル コード
1. はじめにあなたのウェブサイトはまだインターネット上に公開されたままですか?ここでは、HTTPS...