将“位置：绝对”添加到 DIV 时，DIV 改变了它的行为。为什么？答案

【问题标题】：DIV changed its behaviour when "position:absolute" was added to it. Why?将“位置：绝对”添加到 DIV 时，DIV 改变了它的行为。为什么？
【发布时间】：2014-02-02 20:47:51
【问题描述】：

我是 CSS 新手，我有一个问题。

首先，我的 HTML 和 CSS 代码：

<!-- HTML CODE -->

<body>

    <div id="container">Container



    </div>
     <div id="inner">Inner</div>

</body>

<!-- CSS CODE -->


 #container { 
        background-color:#b6ff00;
        width:500px;
        height:500px;
        position:relative;
        }

        #inner {
        background-color:#ffd800;

        }

使用当前代码，浏览器显示以下页面：

这是意料之中的。

但是如果我将这个 css 属性添加到#inner 元素position:absolute; 将会有以下输出：

如您所见，#inner div 只占用它需要的空间。为什么只在#inner div 中添加了position:absolute; 属性而改变了这种情况？

【问题讨论】：

Absolute Positioning & Text Alignment 的可能重复项

标签： html css css-position

【解决方案1】：

那是因为当您使用 position: absolute; 时，该元素将占用 width 直到它包含的元素定义/内容。因为它只是脱离了文档流，所以它本质上是块级的，但不会占用整个文档的水平空间，因为它刚刚超出文档的流程..

如果您希望它是完整的width，您需要明确定义width: 100%;，这样如果您声明height: 100%;，它将占用相对父级的width 以及height 的100%

另外，请确保您始终使用 position: absolute; 并将包装器元素设置为 position: relative; ，否则您的元素将在野外飞出，如果您将位置设置为最终将视口作为最后一个相对包装器使用top、right、bottom 或left 的元素。

我这里已经详细解释过了，CSS Positioning Works

值得注意的是，您将任何元素设为position: absolute; 元素，它将表现为块级元素，但您需要定义height 和width 例如，如果您将一个内联 span 元素 position: absolute; 您可以定义 height 和 width 而无需将其定义为 display: block; （除非并且直到您最初使用 display: none;） p>

【讨论】：

【解决方案2】：

position: absolute; 与 block 元素的行为不同。

您需要为绝对定位的 div 设置宽度和高度。

【讨论】：

【解决方案3】：

这就是绝对位置的工作原理。一旦从文档流中取出，它就会成为一个内联块元素，绝对定位在相对定位的最近元素（或最顶部元素）内

如果你需要它，那么你可以尝试设置宽度和高度，或者你可以做类似的事情

#inner {
    position: absolute;
    left: 0; 
    right: 0;
}

...这将确保它始终粘在屏幕的左侧和右侧。

一般来说，将绝对定位在带有“position:relative”的元素内部的东西放在一个很好的做法，因为您的代码表明您希望将#inner 元素放置在页面上的任何位置，而如果您希望它具有相对于#container 的大小和位置，您的代码应如下所示：

<body>

    <div id="container">
        Container
        <div id="inner">Inner</div>
    </div>

</body>

用 CSS 如：

#container {
    position: relative;
}

【讨论】：

【解决方案4】：

  #inner {
    background-color:#ffd800; width:500px;
    height:500px;
    position:relative;
    }

你可以在这里看到你的输出：- http://jsfiddle.net/KggJd/

【讨论】：

【解决方案5】：

让我解释一下：

位置：相对

这将根据之前找到的元素（即 Prior Siblings）对齐自身。您可以通过使用 margin-top、margin-left、...来更改位置。

位置：绝对

这总是从浏览器的起点考虑，不会符合任何东西。

缺点：

当绝对定位时，您不能将其视为父对象或任何东西。

您可以通过使用上、下、右、左来改变它的位置。

【讨论】：