トップとボトムなしで位置が固定されています

Question

興味深い機能が見つかりましたが、なぜそれが起こるのかわかりません。したがって： 私たちは身体の下に2番目の固定位置要素を持っています。最初の要素はスタイル

.firstEl { 
    width:100%; 
    height:200px; 
    background-color:green; 
} 

2番目の要素は、あなたがトップで要素の位置を固定することになると思います

.fixedEl { 
    position:fixed; 
    right:0; 
    height:100px; 
    width:50px; 
    background-color:red; 
} 

を持っていますか？それは、jsが最初の要素の高さを変更し、固定されたコンテナが彼の位置を変更するとき、intrestingの振る舞いです。 https://jsfiddle.net/titusja/ue715fuk/

P.S.誰かがなぜそれが起こるのかを知るのを助けることができるならば、私は非常に素晴らしいだろう

Answer 1

設定なしで固定位置を使うと、top, left, ..は、それ自身の初期位置に対して絶対位置と同じ振る舞いを持つ。

しかし、top, left, ...を設定すると、ドキュメントまたはページに相対的な位置が固定されます。

Answer 2

要素の位置は、デフォルトで0, 0ではありません。位置はデフォルトで包含要素に対して相対的に設定されているため、例では.fixedElはビューポートに対してright: 0、上部は.firstElの上から0pxです。

デフォルトでは、この要素のデフォルトの位置とスクロールされないビューポートは、上から200pxになり、左は明らかにdivの幅に依存します。しかし、あなたがトップをオーバーライドして、残っていないならば、彼らはすでにleft:(width of the viewport - width of .fixedEl)、top:200pxとしてレンダリングエンジンによって定義され、leftプロパティが定義されているright: 0;

の原因ので、次にウィンドウのサイズ変更には、その位置がに調整されていますビューポートに基づいて位置を反映するので、下にスクロールすると位置が固定されたままになります。

「position：fixed;」を追加するだけで、次のようにあなたの特性は、（限りブラウザが懸念している）のようになります。

position: fixed; 
top: 200px; // defined by default during browser rendering in some browsers (based on scroll position on load) 
left: (width of the viewport - width of .fixedEl); // defined by default during browser rendering in some browsers (based on scroll position/width of browser at time of load and due to right: 0)