ホームページ >ウェブフロントエンド >CSSチュートリアル >固定配置された親要素と子要素では「overflow: hidden」が機能しないのはなぜですか?

固定配置された親要素と子要素では「overflow: hidden」が機能しないのはなぜですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-12-04 18:24:11267ブラウズ

Why Doesn't `overflow: hidden` Work on Fixed Positioned Parent and Child Elements?

オーバーフロー:hidden 固定の親/子要素で機能しない

質問:

なぜオーバーフローしないのですか:固定された親/子の隠しプロパティ関数要素?

例:

.parent {
  position: fixed;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background: #555;
}

.children {
  position: fixed;
  top: 200px;
  left: 200px;
  width: 150px;
  height: 150px;
  background: #333;
}
<div class="parent">
  <div class="children"></div>
</div>

答え:

CSS クリップ:rect() はクリップできます親に固定配置された要素。ただし、次のような注意点があります。

  • 親の位置は静的または相対的であってはなりません。
  • パーセントは直方体座標ではサポートされていません (ただし、auto は 100% に相当します)。
  • 子要素の配置と CSS3 変換は制限される場合がありますoptions.

clip の使用例については、更新された JSFiddle デモを参照してください:rect().

追加メモ:

  • Chrome でのサポートを改善するには、子要素で backface-visibility: hidden を使用します。
  • 古いバージョンとモバイル ブラウザは制限される場合があります。

以上が固定配置された親要素と子要素では「overflow: hidden」が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。