Question

我正在关注使用HTML + CSS创建Web模板tabless的教程，我对模板中元素的定位有一些疑问。

此图片代表我的模板必须如何查看结尾：

enter image description here

现在我必须放置水平主菜单（标题中的绿色菜单）

我所遵循的教程说我必须使用绝对定位向右移动包含导航菜单列表的id = nav的div。

要做到这一点，教程说我必须做以下事情：

将其父div的位置设为 relative ，并设置此父div的确切高度
对具有id = nav

绝对定位

因此，在我的模板中，我必须在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; < / p>

但为什么呢？这意味着什么？

TNX

安德烈

Answer 1

当您提供元素（例如#nav元素）position:absolute时，它的位置与其最近的祖先有关，该祖先的位置为absolute，relative或{{ 1}}。如果它的祖先都没有任何这些位置值，则它相对于初始包含块定位（参见@Alohci’s comment below）。

因为您希望fixed与#nav相关联，#header需要#header来实现这一目标。

您可以改为position:relative #header或position:absolute，但随后它将不再占用文档中的布局空间，文档中的后续元素将向上移动。< / p>

Answer 2

在元素上使用position: absolute时，它会相对于<body>元素定位它。但是，如果您在DOM之一的父元素之一上使用position: relative，则它将相对于该父元素定位。请考虑以下

#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;
}

10px间隙现在将出现在#container元素的顶部而不是body元素之间，因为绝对定位的元素现在相对于#container定位。

在这种情况下，您还应该考虑使用float：right。

Answer 3

听起来你需要更好地掌握css position: absolute

这是一个不错的写作解释：http://css-tricks.com/absolute-positioning-inside-relative-positioning/

（另外，请记住，通过Web开发，通常有多种方法可以完成同样的事情。）

一些疑问与div在相对元素中的绝对定位有关

3 个答案: