固定位置の子を持つ固定位置の親で「overflow:hidden」が失敗するのはなぜですか?

位置が固定された親要素と子要素: Overflow:hidden Bug を理解する

はじめに

固定位置の親要素と子要素を含む特定のシナリオでは、親要素が期待どおりに機能しません。この記事では、この動作の背後にある理由を調査し、考えられる解決策を示します。

問題の概要

次の CSS および HTML コードを考慮してください:

.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>

このシナリオでは、.parent 要素は固定配置され、overflow:hidden に設定されていますが、 .children 要素は、オーバーフロー プロパティにもかかわらず、親の境界を超えて拡張されているように見えます。

バグの理由

この問題は、親要素の位置が固定されているために発生します。つまり、通常のドキュメント フローから削除され、代わりにビューポートを基準にして配置されます。したがって、overflow:hidden プロパティは固定要素自体の座標系内でのみ適用され、その座標系外の子要素には影響しません。

考えられる解決策: CSS Clip プロパティ

このシナリオでは overflow:hidden が期待どおりに機能しないため、別の方法として、親要素の CSS クリップ プロパティを使用します。 Clip プロパティを使用すると、クリッピング領域を作成して、指定した境界内に要素のコンテンツを制限できます。

.parent {
  position: fixed;
  clip: rect(0px, 300px, 300px, 0px);  /* Top, Right, Bottom, Left */
  width: 300px;
  height: 300px;
  background: #555;
}

clip: rect() を使用すると、親の境界に一致するクリッピング領域を定義できます。

CSS クリップの使用に関する考慮事項プロパティ

CSS クリップ プロパティは overflow:hidden バグの解決策を提供しますが、注意すべき制限と考慮事項がいくつかあることに注意することが重要です。

• 古いブラウザでは、クリップ プロパティのサポートが制限されています。
• 異なるブラウザ間で互換性を確保するには、慎重な調整が必要な場合があります。
• クリップされた親内で相対的または絶対的に配置された子要素は、配置に関する問題が発生する可能性があります。

結論

の制限について固定配置の要素を使用した overflow:hidden は、効果的な CSS レイアウトを作成するために重要です。 CSS クリップ プロパティなどの代替方法を使用すると、目的のクリッピング動作を実現し、潜在的な表示の問題を回避できます。さまざまな手法のメリットと制限を比較検討し、それらが設計の特定の要件と一致していることを確認することが重要です。

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