65

さて、私は何かに気づきましたが、CSS仕様でそれを見つけることができませんでした。要素をでスタイリングするposition: fixedと、ブラウザのビューポートに対して絶対に配置されます。固定位置の要素を別の要素の中に配置するとどうなりますか？

次の行に沿ったCSSの例：

.fixed {
  position: fixed;
  width: 100px;
  height: 100px;
  background: red;
}

#parent {
  right 100px;
  padding: 40px;
}

.fixed .fixed {
  background: blue;
}
<div id="parent" class="fixed">
  <div class="fixed"> </div>
</div>

私が知る限り、要素は固定位置にある最も近い親に対して固定位置にあります。これはすべてのブラウザで観察できますか。また、それはバグですか、それとも意図的な動作ですか？

これまでのところ、このトピックについては何も見つかりませんでした。「固定位置を使用すると、ページに固定されます」。

4

6 に答える 6

41

固定と位置決めは2つの別々のものです。それらは、絶対的に配置された要素と同じように配置されます：それらを含むブロックに対して相対的です。ただし、絶対的に配置された要素とは対照的に、それらはビューポートに対してその位置に固定されたままです（つまり、スクロールしても移動しません）。

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

ボックスの位置は「絶対」モデルに従って計算されますが、さらに、ボックスはいくつかの参照を基準にして固定されています。

ポジショニング

包含ブロックの定義は次のように述べています。

要素に「position：fixed」がある場合、連続メディアの場合、包含ブロックはビューポートによって確立されます（...）

と

要素に「position：absolute」がある場合、包含ブロックは、「absolute」、「relative」、または「fixed」の「position」を持つ最も近い祖先によって確立されます（...）

これは、それらの配置アルゴリズムは同じですが（両方とも包含ブロックに対して配置されます）、固定要素の包含ブロックは、絶対配置された要素とは対照的に、常にビューポートであるため、それに対して配置する必要があることを示しています。絶対位置または固定位置の要素ではありません。

そして実際のところ、それは確かに事実です。たとえば、にを追加top: 20pxすると.fixed、両方のdivがビューポートの上部から20ピクセルの位置に配置されます。ネストされた固定divは、親の上部から20ピクセル下に配置されません。

この場合に表示されない理由は、実際には左/上/右/下のプロパティを設定していないためです。したがって、それらの位置は、フロー内の位置（「静的位置」）によって決定されます。 "）、私の最初の引用が言ったように、それは絶対モデルに従って行われます。

于 2009-09-06T01:20:36.183 に答える
12

最初の要素

position: fixed;

そして、インサイダー要素は次のようにする必要があります。

position: sticky;

于 2020-05-10T20:52:47.180 に答える
3

これは、を使用する要素の祖先の1つが次のスタイリングルールのいずれかを定義した場合にのみ発生します：、、、このposition: fixed場合、この条件に一致する最も近い祖先が次のように使用されます。ビューポートではなく、要素の座標の参照。filtertransformperspective

MDNから

修繕

要素は通常のドキュメントフローから削除され、ページレイアウトの要素用のスペースは作成されません。ビューポートによって確立された最初の包含ブロックを基準にして配置されます。ただし、祖先の1つに変換、パースペクティブ、またはフィルタープロパティが設定されていない場合（CSS変換仕様を参照）、その場合、その祖先は次のように動作します。含むブロック。（ブロックの形成を封じ込めるのに寄与するパースペクティブとフィルターにはブラウザーの不整合があることに注意してください。）その最終的な位置は、上、右、下、および左の値によって決定されます。

この値は常に新しいスタッキングコンテキストを作成します。印刷されたドキュメントでは、要素はすべてのページの同じ位置に配置されます。

于 2020-11-24T03:24:53.013 に答える
2

これは本当に意図したことではないと思います。固定された位置にあるものはすべてウィンドウに対して配置されます。固定された別の固定された子がある場合、何をしたいですか？両方の固定要素を別々に配置するだけでなく、他の位置を使用して固定要素内の子の位置を変更することで、動作を簡単に複製できます。：D

于 2009-09-06T00:48:05.573 に答える
2

これには、w3cが言っていること以外に何かがあるとは思いません。

ブラウザウィンドウを基準にして配置された絶対位置の要素を生成します。要素の位置は、「左」、「上」、「右」、および「下」のプロパティで指定されます

したがって、その「パディング：40px;」を取り除くと あなたは2つの要素を得るでしょう-1つはもう1つです。

同じ親（本体）で両方の要素を絶対的に上：0左：0に配置した場合と同じ効果。

于 2009-09-06T01:11:57.497 に答える
1

短い答え：

位置が固定されたスクロール可能な要素（モーダルなど）があり、子の1つも固定したい場合（モーダルの閉じるボタンなど）、解決策は次のとおりです。要素をスクロール不可にすることができます。代わりに、その中に子を作成し、スクロール可能にします（たとえば、モーダルコンテンツ）。このようにposition: absoluteして、の代わりに、修正したい子（たとえば、モーダル閉じるボタン）に適用できますposition: fixed。

長い答え：

私の場合、display: fixedモーダルを持っていて、overflow: autoそれをスクロール可能にするために適用しました。それから私は閉じるボタンを作りたかったdisplay: fixed。

ネストdisplay: fixedはChromeで機能しましたが、Firefoxでは機能しませんでした。そこで、構造を変更し、overflow: autoモーダルからを削除してスクロール不可にし、代わりにモーダルコンテンツをスクロール可能にしました。position: absoluteまた、閉じるボタンに追加されました。

于 2019-10-18T18:08:58.717 に答える