CSS の固定位置の親/子要素で「overflow: hidden」が機能しないのはなぜですか?

Overflow:hidden 配置された親/子要素では無効: 問題または仕様?

CSS では、overflow: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;
}

説明:

この問題は、 CSS の制限: overflow:hidden は要素のフロー内のコンテンツのみを効果的に隠します。位置指定された要素は、position:fixed と同様に、通常のフローから削除され、オーバーフローの処理には関与しません。

代替解決策: CSS Clip Property

To配置された要素で目的のオーバーフロー クリッピング動作を実現するには、clip プロパティの使用を検討してください。要素内に表示または非表示にする長方形の領域を定義できます。

例:

.parent {
  position: fixed;
  clip: rect(0px, 300px, 300px, 0px);
  width: 300px;
  height: 300px;
  background: #555;
}

注意:

• 親要素の位置を静的または固定にすることはできません。相対。
• Rect 座標はパーセンテージをサポートしません ('auto' を除く)。
• IE や Chrome などの特定のブラウザでは、子要素には位置制限がある場合があります。

追加の考慮事項:

• 追加背面の可視性: 非表示;子要素の配置と CSS3 変換の処理を改善するため。
• モバイル ブラウザーと古いバージョンでは、クリップ プロパティのサポートが制限されている場合があります。

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