web-dev-qa-db-ja.com

CSS：位置：位置の内側に固定：固定

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

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

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

.fixed .fixed { background: blue; }

そしてHTML：

<div id="parent" class="fixed"> <div class="fixed"> </div> </div>

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

これまでのところ、私はインターネット上でこのトピックについて何も見つけませんでした。ただ、「固定された位置はそれをページに密着させます」。

cssnested
50
user146570

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

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

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

ポジショニング

包含ブロックの定義 の意味：

要素に「位置：固定」がある場合、連続ブロックの場合、包含ブロックはビューポートによって確立されます（...）

そして

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

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

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

この場合、実際には左/上/右/下のプロパティを設定していないため、それらの位置はフロー内の位置によって決まります（「- static position "）は、最初の引用で述べたように、絶対モデルに従って行われます。

38
mercator

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

2
Gordon Gustafson

これにはw3cが言っている以上のことはないと思います。

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

そのため、「padding：40px;」を取り除くと2つの要素を取得します-1つは別の要素の上にあります。

同じparent（body）で両方の要素をtop：0 left：0に絶対に配置した場合と同じ効果です。

2
Gavrisimo