Question

我需要使用position:absolute;来获取流量元素。

现在，如果我只设置position:absolute;而不给出任何上/下/左/右值或给出父亲的相对位置，那么该元素就位于我想要的位置。

这是 FIDDLE

html：

<div id="parent">
    <div id="absolute">.. Absolute div ..</div>
</div>

CSS：

#parent{
    width:50%;
    margin:10% auto;
    background:gold;
    height:20%;
}
#absolute{
    position:absolute;
    background:lightgrey;
    padding:2%;
}

有没有理由不这样做？

我应该真正给出元素的上/左值和父元素的相对位置以及为什么？

Answer 1

如果你想让一个元素保持在静态位置（如果没有定位那么通常是这样），但只是将它从正常流程中取出，只需指定position: absolute即可。行为如规范的10.3.7和10.6.4部分所述，每个浏览器的行为都正确。

如果你不想将元素从通常的静态位置移动~~，你不需要给它任何偏移量，如果你不去，你不需要相对定位它的父元素将元素移动到任何地方，因为无论如何它都会保持在静态位置。~~

我只是再次看了你的代码并注意到你正在对你的absposed元素应用百分比填充。如果您希望根据此父元素的宽度而不是初始包含块（根元素所在的位置）计算百分比填充，则需要相对定位父元素：

#parent{
    position:relative;
    width:50%;
    margin:10% auto;
    background:gold;
    height:20%;
}

将this fiddle与the original进行比较。

因此，相对定位绝对定位元素的一些祖先的主要目的是指定其包含块。章节9和10包含了关于元素及其包含块之间交互的大部分细节。根据您的布局，您可能根本不需要放置任何其他内容，但是如果您的布局足够复杂，您可能会发现由于您是否放置任何容器元素以及您确定哪个容器元素而产生副作用。我怀疑包含块的主题可以用不同的问题来涵盖，因为它很可能超出了这个范围。

Answer 2

我会说：这取决于你对父元素做了什么。

如果向父级添加内容，并且position:absolute;top:0;left:0;向child添加内容，则需要帮助，因此未设置父级的位置，因此它保持静态。

此处仅添加内容的示例：fiddle child box moved down cause of content

此处包含position:relative; to parent和position:absolute;top:0;left:0; to child的示例： fiddle

#parent{
    position:relative;
    width:50%;
    margin:10% auto;
    background:gold;
    height:20%;
}
#absolute{
    position:absolute;
    background:lightgrey;
    padding:2%;
    left:0;top:0;
}

Answer 3

问题是，如果你没有指定位置，它的默认值是static，它不允许你指定任何偏移量，如left，top ...但是如果你不需要指定偏移量，就像你的情况一样，然后它是完全有效的。另一方面，如果你想指定偏移量，那么你还需要将位置设置为静态以外的其他位置。

Answer 4

我做了一个测试套件，关于＆＃34; position：absolute;＆＃34;。 ---＆GT;看看this

总结：

元素集的包含块的左边缘位置：绝对值＆＃39;没有顶部，右侧，底部或左侧可能是其上一个内联框的右边缘（忽略空格）

元素集的包含块的上边缘位置：绝对值＆＃39;没有顶部，右侧，底部或左侧可能是元素所在的行框的包含块的顶部边缘

But I cannot find any relevant specifications in w3.

位置：绝对没有顶部/左侧/底部/右侧值

4 个答案: