Question

我有：

.event {
    float:left;
    position:relative;
    top: 50px;
    width: 100%;
    height: 100px;
    background-color: #FFFFFF;
    border-top: 1px solid #D6D6D6;
    border-bottom: 1px solid #D6D6D6;
}

它符合我对firefox＆amp ;;的喜爱苹果浏览器。主要是浮动另一个元素，但要抵消它。我知道我可以使用margin-top：50px用于浮点数，但无论出于什么原因，top对我来说更具语义感。

谢谢！马特穆勒

Answer 1

首先，我会尝试尽可能不将浮动和相对/绝对定位结合起来。仅仅是因为增加了复杂性和跨浏览器问题的额外机会。

其次，浮点数上有position: relative的有效用例。最明显的是使用relative+absolute positioning（浮动的内部元素相对于容器绝对定位）。

这似乎不是你正在做的，所以我建议使用margin-top。你可能会有这样的麻烦。话虽这么说，我甚至不确定top: 50会做你期望的事情。

Answer 2

我发现我有时候需要浮动：左边和位置：相对，因为浮动的div包含使用position：absolute的元素。

“position：relative”确保子元素在其自己的div中正确定位。如果父母没有“亲戚”，他们就会被安置在外面。

Answer 3

使用top时，包含元素也必须定位（相对或绝对），否则你不会总是得到想要的结果。这会回答你的问题吗？

Answer 4

没错。 float指的是呈现元素的流。position指的是此元素偏移的锚元素。如果它们是相互排斥的，W3C建议会将可能的选项转换为单个属性。

Answer 5

糟糕的主意，因为它的位置仍然在同一个地方，但是你将它从原来的位置偏移，而你会遇到this

在这种情况下你应该使用margin:50px 0 0;，因为它会正确地移动后来的任何元素。您不需要显式设置width:100%。

Answer 6

你做的方式没有“错误”。在许多情况下，这可以被认为是“正确”的方式。

话虽如此，你应该知道position: relative; top: 50px;与margin-top: 50px;之间没有或多或少的语义。你应该两种方式都很自在，我建议在这种情况下使用保证金，作为你的第一种方法。

相对定位混淆元素如何相互流动。如果您以后决定要将另一个元素向左浮动并堆叠在.event元素下方，您会发现.event与新元素的前50px重叠。当您使用相对定位偏移元素时，其框仍保留在将呈现的布局中，而没有定位，因此它将与附近的元素奇怪地交互。

定位和安装是否有任何问题？浮动？

6 个答案: