2

position: relative;子要素が絶対的に配置されている場合（つまり）、コンテナ要素を追加する必要がある理由を理解するのに苦労していposition: absolute;ます。例を挙げて説明しましょう。

サンプルHTMLコード：

<ul>
   <li>...</li>
   <li id="parent">
      <a href="#">Menu</a>
      <div id="child">...</div>
   </li>
   <li>...</li>
   <li>...</li>
</ul>

コードが水平メニューを表していると考えてください。これは次のように表示されます。

スクリーンショット

問題は、のpositionプロパティの値#parentがデフォルト（つまりposition: static;）の場合、子要素が絶対に配置されていても、その幅はの幅とともに増加することです。これは、のせいで現在フローから外れているため、#child発生しないはずです。#childposition: absolute;

position: relative;私が使用すると、すべてが所定の位置に収まります。#parentつまり、のサイズに関係なく、その幅は同じまま#childです。

ここで何が欠けていますか？position: relative;（私が推測する）デフォルトの動作であるはずの何かに使用する必要があるのはなぜですか？

更新：私の主張をよりよく説明するためにフィドルを作成しました。ご覧ください。

問題を再現する手順：

  • フィドルのプレビューで、[チャンネル]メニューをクリックすると、非表示のメニュー項目がスライドして表示されます。

  • 次に、F12ブラウザ（Chrome、Safari、またはFirebugがインストールされているFirefox）でキーを押し、検査ツールを使用して[チャネル]メニューを検査します。

    これで、開いているDevToolsまたはFirebugペインの[Elements]タブにある関連するHTMLコードがすぐに表示されます。

    <li class="float-left top-menu">内部の最初のインスタンスを探し、<ul id="top-navbar">その行の上にマウスを置きます。次のように表示されます。

スクリーンショット

赤い境界線のサイズにする必要があるのに、青いインジケーターボックス（つまりメニュー）がなぜそれほど大きいのですか？私が今言っていることを理解しますか？

次に、適用position: relative;しますli（つまりli.float-left.top-menu { position: relative; }、違いを自分で確認します）。

4

2 に答える 2

3

position:relative絶対に配置された子要素が相対的な上/左を設定する新しい包含ボックスを作成します。

position: staticは包含ボックスを作成せず、絶対に配置された子要素はDOMツリーを上って歩き始め、本体に当たるまで包含ボックスを見つけ、見つけた祖先を左上に使用します。

編集：申し訳ありませんが、あなたの質問を読み間違えました。問題の説明を再現できないようです（このフィドルを参照）。問題の最小限のテストケースをコードに投稿していただけますか。

于 2012-12-20T15:27:05.427 に答える
0

わかった。私は今、愚かだと感じています。私はmin-width子要素で使用していましたが、幅がほぼ定義されているため、メニュー (つまり親) の幅も拡大されました。削除するmin-widthと、すべての疑問が解消されました。

そして、必読：相対ポジショニング内の絶対ポジショニング（このコメントとこの回答も）。

于 2012-12-20T16:46:30.063 に答える