为什么 CSS 中的绝对位置一直绑定到文档正文而不是封闭 div？答案

【问题标题】：Why absolute position in CSS keeps binding to document body instead of enclosing div?为什么 CSS 中的绝对位置一直绑定到文档正文而不是封闭 div？
【发布时间】：2015-12-14 16:26:59
【问题描述】：

我有一些 HTML/CSS。

整个页面大小为 1000 x 1000 像素，并被一个框包裹着。出于对齐目的，我暂时在以后将隐藏或不可见的所有内容周围放置一个纯黑色边框。左上角 (#Logo) 有一个图像，然后是徽标右侧的 div 框 (#Upper_Left)。

我想使用绝对定位将东西放在#Upper_Left div 框的顶部或底部边缘。在这种情况下，h1 标题位于框的顶部，而其他一些文本 ["Search:____________[drop][drop]" - 搜索栏的占位符] 位于 div 框的左下方。在我的 HTML/CSS 代码中，“Search:____________[drop][drop]”文本出现在浏览器的左下方，而不是 #Upper_Left div 框。

如何使文本位置相对于 div 框？

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            * {
                margin: 0px;
                padding: 0px;

                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            * {
                border-style: solid;
                border-color: black;
                border-width: 1px;
            }
            #Entire_Page {
                max-width: 1000px;
                max-height: 1000px;
                min-width: 1000px;
                min-height: 1000px;
            }
            #Logo {
                float: left;
                width:104px;
                height:118px;
            }
            #Upper_Left {
                display: inline;
                float: left;
                max-width: 500px;
                max-height: 118px;
                min-width: 500px;
                min-height: 118px;
            }
            #Title {
                display: inline;
                font-size: 3em;
            }
            #bottom_left {
                position: absolute;
                bottom: 0px;
                left: 0px;
            }
        </style>
    </head>

    <body>
        <div id="Entire_Page">
            <img id="Logo" src="logo.png" alt="logo">
            <div id="Upper_Left">
                <h1 id="Title">Title (Up Top)</h1>
                <div id="bottom_left">
                    Search:____________[drop][drop]
                </div>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

您需要指定一个包装元素相对定位，然后绝对定位的子元素将相对于其父元素定位自身。 .parent { position: relative; } .parent div { position: absolute: top 10px; left: 10px; }
绝对定位是一种非常糟糕的网页布局方法。它非常不灵活，并且有更好和响应速度更快的选项。查看LearnLayout.com
所以在这种情况下，包装元素将是外部 div [名称为 Entire_Page 的 1000 像素 x 1000 像素？] 或者您会在 Entire_Page 和内部 div 之间定义一个绝对的 div位置设置？
这取决于您要查找的内容。如果外部 div 与文档正文的位置相同，那么您需要更改样式以将其移开 - 或创建另一个元素和样式以获得所需的定位。
正如@Paulie_D 提到的 - 绝对定位是元素默认布局的不良候选者。它通常用于在非常特殊的情况下布置元素。

标签： html css

【解决方案1】：

添加position: relative;。

 #Upper_Left {
   position: relative;
   display: inline;
   float: left;
   max-width: 500px;
   max-height: 118px;
   min-width: 500px;
   min-height: 118px;
  }

http://codepen.io/anon/pen/xZwNam

【讨论】：

您希望它位于#Upper_Left 的底部吗？
是的。搜索框位于名称为 Upper_Left 的框的底部。我只需要知道“定位总是相对于本身定位的最后一个祖先定位（而不仅仅是自动流入页面）” - 谢谢
没问题，这是你在 CSS 中学到的重要概念，非常有价值。