Fatal编程技术网
  • css/
  • Css 一些疑问与div在相对元素中的绝对位置有关

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

css html

Css 一些疑问与div在相对元素中的绝对位置有关,css,html,xhtml,Css,Html,Xhtml,我正在学习一个关于使用HTML+CSS创建web模板表的教程，我对模板中元素的定位有一些疑问 此图像表示我的模板在结尾处的外观： 现在我必须放置水平主菜单（标题中的绿色菜单） 我下面的教程说，我必须使用绝对定位向右移动id=nav的div，该div包含带有导航菜单的列表 为了做到这一点，教程说我必须做以下事情： 将其父div的位置设置为相对，并设置此父div的确切高度 对于id=nav的div，使用绝对定位 因此，在我的模板中，HTML代码中必须有类似的内容： <div

我正在学习一个关于使用HTML+CSS创建web模板表的教程，我对模板中元素的定位有一些疑问

此图像表示我的模板在结尾处的外观：

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

我下面的教程说，我必须使用绝对定位向右移动id=nav的div，该div包含带有导航菜单的列表

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

  • 将其父div的位置设置为相对，并设置此父div的确切高度
  • 对于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>
    我认为#nav div的定位的含义很简单（如果我错了，请纠正我），并且是：id=nav的div绝对位于其容器的右侧（因为right:0；），该div向下推动166px

    这个推理正确吗

    我不明白的是：为什么要在父div（标题）中将位置设置为相对位置？

    我认为，一般来说，当我必须将一个元素置于位置时：绝对我必须设置它的父项必须是位置：相对

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

    Tnx

    Andrea

    当你给出一个元素（比如你的
    #nav
    元素）的
    位置：绝对
    ，它的位置是相对于它最近的祖先的，它的位置有
    绝对
    ，
    相对
    ，或
    固定
    。如果其祖先没有任何位置值，则其位置相对于初始包含块（请参见）

    因为您希望
    #nav
    相对于
    #header
    定位自身，
    #header
    需要具有
    位置：相对
    才能实现这一点
    
您可以改为指定
    #header
    位置：绝对
    或
    位置：固定
    ，但这样它将不再占用文档中的布局空间，文档中的后续元素将向上移动。
    当您指定一个元素（如
    导航
    元素）
    位置：绝对
    时，它相对于最近的祖先进行定位，最近的祖先具有位置
    绝对
    ，
    相对
    ，或
    固定
    。如果其祖先没有任何位置值，则其位置相对于初始包含块（请参见）
    
因为您希望
    #nav
    相对于
    #header
    定位自身，
    #header
    需要具有
    位置：相对
    才能实现这一点
    

    您可以改为使用
    #header
    position:absolute
    或
    position:fixed
    ，但这样它将不再占用文档中的布局空间，文档中的后续元素将向上移动。
    听起来您需要更好地掌握css
    position:absolute
    
这是一篇像样的文章来解释它：
    

    （另外，请记住，在Web开发中，通常有多种方法可以完成相同的任务。）
    听起来您需要更好地掌握css
    位置：绝对
    
这是一篇像样的文章来解释它：
    

    （另外，请记住，在Web开发中，通常有多种方法来完成相同的任务。）
    当您在元素上使用
    位置：绝对
    时，它将相对于
    元素对其进行定位。但是，如果在DOM下面的某个元素父元素上使用
    position:relative
    ，它将相对于该父元素进行定位。考虑下面的
    

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


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

    
10px的间隙现在将出现在#容器元素的顶部之间，而不是主体元素，因为绝对定位的元素现在是相对于#容器定位的
    

    你也应该考虑使用浮点：在这种情况下是正确的。 在元素上使用
    position:absolute
    时，它将相对于
    元素进行定位。但是，如果在DOM下面的某个元素父元素上使用
    position:relative
    ，它将相对于该父元素进行定位。考虑下面的
    

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


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

    
10px的间隙现在将出现在#容器元素的顶部之间，而不是主体元素，因为绝对定位的元素现在是相对于#容器定位的
    

    你也应该考虑使用浮点：在这种情况下是正确的。 好的，现在我更清楚了。我唯一的疑问是：如果我设定了财产的位置：相对的；对于id=header的div（对于这个div，我只是将position属性设置为relative，而不是top、left等属性），这意味着这个div相对于body元素定位，但它的位置不会改变，因为我没有将其他属性设置为top或left？@AndreaNobili：不完全是这样
    position:relative
    使一个元素相对于它在有
    position:static
    的情况下应该定位的位置进行定位。因此，如果您确实给出了
    div#header
    ，例如
    left:5px；顶部：5px，它将向下移动5个像素，向左移动5个像素。但是是的：如果您给出一个元素的
    位置：relative
    ，并且没有设置它的
    top
    、
    left
    、
    bottom
    或
    right
    属性，那么它将保持原来的位置。请注意，默认值不是body元素，而是。好吧，现在我更清楚了。我唯一的疑问是：如果我设定了财产的位置：相对的；为了我的h部门

    #container
{
    position: relative;
}

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