絶対配置要素が位置決めガイドラインに従わないのはなぜですか？

Question

私はdreamweaver（https://helpx.adobe.com/dreamweaver/how-to/make-website-pt6-web-links-navigation.html）でウェブサイトを構築する方法に関するチュートリアルに従っていますが、チュートリアルの特定のステップがなぜ機能するのか理解しようとしています。

私はここで、それはDOM構造の位置だだ、絶対位置要素#navlinkを持っていますが、代わりに、

nav 
    h2 #menulink 
    ul #navlink 
nav 

が視覚的に結果を見て、UL＃1 navlinksは絶対フラグどおりのページから削除されます最後に配置された要素の隣に固定されています。これはhtmlページです（ulの上にある要素は相対位置に配置されていないため、domの上にあるh2＃menulinkにジャンプします）。

私のコードでは間違いで、何らかの形でh2やnav要素をinedvertantlyに配置しているか、ドキュメントフローのアタッチポイントがオーバーライドされている理由を見落としているかどうかはわかりませんが、コードを何度も繰り返しても間違いを見つけることはできません。

私はjfiddleでそれを持っているので、これは完全なソースコードへのリンクだけでなく、レンダリングされたページである：

https://gist.github.com/anonymous/5d8bde1f196b919dab297560ff85b072

Answer 1

これは正常な動作です。あなたのコードは正しいですし、ブラウザもそうです。 absoluteの位置付けでは、leftまたはrightプロパティが定義されている場合にのみ水平方向に最後に配置された要素の次にアンカーされ、topまたはbottomプロパティが定義されている場合にのみ垂直に固定されます。

何top、bottom、leftまたはul#navlinkのために定義されたrightがない場合、それは「ページから削除」が、position: staticとして配置されます。