Question

我是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;

        }

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

enter image description here

这是预期的。

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

enter image description here

正如您所看到的，＃inner div只需要它所需的空间。为什么只有position:absolute;属性添加到#inner div？

才会改变

Answer 1

那是因为当你使用position: absolute;时，元素会占用width到它定义的元素/它包含的内容。因为它只是从文档流中走出来所以它本质上是块级的但是不会占用文档的整个水平空间，因为它只是文档的流程..

如果您希望它是完整的width，您需要明确定义width: 100%;，这样它才会占据相对父级width的100％以及height如果您声明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;

Answer 2

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

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

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

Answer 4

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

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

Answer 5

让我解释一下：

张贴：亲戚

这将根据之前发现的元素（即先前兄弟姐妹）对齐。你可以使用margin-top，margin-left，....来改变位置。

排名：绝对

这将始终从浏览器的起点开始考虑，并且不会与任何内容一致。

缺点：

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

您可以使用上，下，右，左更改其位置。

当“position：absolute”被添加到它时，DIV改变了它的行为。为什么？

5 个答案: