0

HTML+CSS を使用した Web テンプレート テーブルの作成に関するチュートリアルに従っていますが、テンプレート内の要素の配置に関連する疑問があります。

この画像は、私のテンプレートが最後にどのように見えるかを表しています:

ここに画像の説明を入力

ここで、水平メイン メニュー (ヘッダーにある緑色のメニュー) を配置する必要があります。

私がフォローしているチュートリアルでは、絶対位置を使用して、ナビゲーション メニューのリストを含む id=nav を持つ div を右に移動する必要があると述べています。

これを行うには、チュートリアルでは、次のことを行う必要があると述べています。

  1. 親divの位置を相対的に設定し、この親divの正確な高さを設定します
  2. id=nav を持つ divの絶対配置を使用します

したがって、私のテンプレートでは、HTML コードに次のようなものが必要です。

        <div id="header">    <!-- HEADER -->
            <div id="logo">     <!-- My Logo -->
                <h1><a href="#">My web site is cool</a></h1>
                <p id="slogan">
                    My web site is finally online
                </p>
            </div>

            <!-- Here go the horizontal main menu -->
            <div id="nav">
                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Portfolio</a>
                    </li>
                    <li>
                        <a href="#">Blog</a>
                    </li>
                    <li>
                        <a href="#">Contatti</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                </ul>
            </div>

そして、CSS コードは次のようになります。

#header {
    background: #092F85;
    position: relative;
    height: 193px;          /* I set the height of my header */
}   


#nav{
    background: #93D459;
    position: absolute;
    top: 166px;
    right: 0;
}

#nav divの配置の意味は簡単だと思います(間違っている場合は修正してください)。 id=nav を持つ div は絶対に右側に配置されます (右: 0;のため) 。そのコンテナと thisdiv は 166px 下に押し出されます。

この推論は正しいですか？

私が理解できないのは、親 div (#header) で位置を相対的に設定する必要があるのはなぜですか?

一般的に、 position: absolute;を使用して要素を配置する必要がある場合は、そうなると思います。親がposition: relative;でなければならないことを設定する必要があります。

しかし、なぜ？その意味？

TNX

アンドレア

4

3 に答える 3

2

要素 (あなたの#nav要素のような)を与えるposition:absoluteと、それは位置absolute、relative、またはを持つ最も近い祖先に関連して配置されfixedます。その祖先のいずれにもこれらの位置の値がない場合は、最初の包含ブロックに対して相対的に配置されます (以下の @Alohci のコメントを参照してください)。

#navとの関係で自分自身を位置づけたいので#header、それを実現する#header必要があります。position:relative

#header position:absolute代わりにorを指定することもできますがposition:fixed、ドキュメント内のレイアウト スペースを占有しなくなり、ドキュメント内の後続の要素が上に移動します。

于 2013-07-01T15:49:26.977 に答える
2

要素で使用するposition: absoluteと、要素を基準にして配置され<body>ます。ただしposition: relative、DOM のさらに下にある要素の親の 1 つで使用すると、その親要素に対して相対的に配置されます。次のことを考慮してください

#positioned_element
{
    position:absolute;
    top: 10px;
}


<body>
    <div id="container">
        <div id="positioned_element">
        </div>
    </div>
</body>

body 要素の先頭と #positioned_element の間には 10px のギャップがあります。ただし、そうする場合

#container
{
    position: relative;
}

#positioned_element
{
    position:absolute;
    top: 10px;
}

10 ピクセルのギャップは、body 要素からではなく、#container 要素の上部の間に表示されるようになりました。これは、絶対配置された要素が #container に対して相対的に配置されるためです。

この場合、float: right の使用も検討する必要があります。

于 2013-07-01T15:59:03.703 に答える
0

cssの理解を深める必要があるようですposition: absolute

これはそれを説明するまともな記事です：http://css-tricks.com/absolute-positioning-inside-relative-positioning/

(また、Web 開発では、通常、同じことを達成する方法が複数あることを覚えておいてください。)

于 2013-07-01T15:58:23.620 に答える