オーバーフロー:hidden_html/css_WEB-ITnose
私は当初、overflow:hidden で溢れている子要素をすべて非表示にできると考えていましたが、今日それが間違っていたことが分かりました。
overflow:hidden に関する最大の誤解: 高さと幅の少なくとも 1 つを持つコンテナに overflow:hidden が適用されている場合、コンテナ内のオーバーフローするコンテンツはクリップ (非表示) されます。
以下の条件が同時に満たされる場合は無効です:
- overflow:hidden スタイルのブロック要素には、position:relative とposition:absolute がありません
- 内部のオーバーフロー要素は、position を介して絶対的に配置されます:absolute
オーバーフローに関する CSS2.1 仕様のオンライン説明は次のとおりです:
原文
このプロパティは、ブロック コンテナー要素のコンテンツが要素のボックスをオーバーフローしたときにクリップされるかどうかを指定します。含まれるブロックがビューポートまたは要素の祖先である子孫要素 (およびそれぞれのコンテンツと子孫) を除く、要素のすべてのコンテンツ。
Translation
この属性 (オーバーフロー) は、ブロック要素コンテナーのコンテンツがいつオーバーフローするかを指定します。要素のボックス モデル 境界線をクリップするかどうか。これは、適用された要素のすべてのコンテンツのクリッピングに影響します。ただし、子孫要素の包含ブロックがビューポート全体 (通常、ブラウザーのコンテンツの表示領域を指し、body 要素として理解できます) またはコンテナの親要素 (オーバーフローが定義されている要素) である場合、影響を受けません。
誰もが「包含ブロック」についてよく知っています:
絶対的に配置された要素。その包含ブロックは、相対または絶対配置属性を持つ最も近い祖先要素です。第 1 レベルの祖先要素が一致しない場合は、その要素が一致します。包含ブロックは body 要素です。
これは、絶対に配置された要素が overflow:hidden によって非表示になるかどうかは、その要素を含むブロックの overflow:hidden に対する相対的な位置に依存することを意味します。
CSS2.1 仕様のセクション 11.1 には、より明確な説明があります:
元のテキスト
子孫ボックスは、部分的にボックスの外側に絶対的に配置されます。このようなボックスは、祖先のオーバーフロー プロパティによって常にクリップされるわけではありません。具体的には、それらは、それ自体とそれを含むブロックの間の祖先のオーバーフローによってクリップされません。
翻訳
部分的にコンテナの外側にある、絶対的に配置された子孫ブロック要素。このような要素がクリップされるかどうかは、オーバーフロー プロパティを定義する祖先コンテナーに常に依存するわけではありません。特に、要素自体とそのコンテナーを含むブロックの間の祖先コンテナー のオーバーフロー プロパティによってクリップされることはありません。
したがって、overflow:hidden は全能ではありません。そのすべての子要素を完全にトリミングしたい場合は、overflow:hidden を持つだけでなく、すべての子要素を含むブロックとしても機能する必要があります。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











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

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合
