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 绝对位于右侧（因为right: 0;）它的容器和thisdiv被向下推166px。

这个推理正确吗？

我无法理解的是：为什么在父 div（#header）中我必须将位置设置为相对？

我认为，一般来说，当我必须放置一个带有position: absolute;的元素时。我必须设置它的父级必须是position: relative;

但为什么？这是什么意思？

肿瘤坏死因子

安德烈亚

4

3 回答 3

2

当你给一个元素（比如你的#nav元素）position:absolute时，它的定位是相对于它最近的具有 position absolute、relative或的祖先fixed。如果它的祖先都没有任何这些位置值，则它相对于初始包含块定位（请参阅下面的@Alohci 评论）。

因为你想#nav将自己定位于#header，#header所以必须position:relative要做到这一点。

你可以给#header position:absolute或position:fixed取而代之，但它不再占用文档中的布局空间，并且文档中的后续元素会向上移动。

于 2013-07-01T15:49:26.977 回答
2

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

#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: 。

于 2013-07-01T15:59:03.703 回答
0

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

这是一篇不错的文章解释它：http ://css-tricks.com/absolute-positioning-inside-relative-positioning/

（另外，请记住，使用 Web 开发通常有不止一种方法可以完成相同的事情。）

于 2013-07-01T15:58:23.620 回答