0

我有：

.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 和 safari 中符合我的喜好。主要浮动在另一个元素上，但要抵消它。我知道我可以使用margin-top:50px浮点数，但无论出于何种原因，top 对我来说更具语义意义。

4

6 回答 6

3

首先，我会尽量不要将浮点数和相对/绝对定位结合起来。只是因为增加了复杂性和跨浏览器问题的额外机会。

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

这似乎不是你正在做的，所以我建议使用margin-top. 这样你的头痛可能会减少。话虽这么说，我什至不确定top: 50会按照你的期望做。

于 2009-10-20T06:36:03.840 回答
1

我发现我有时需要 float:left AND position:relative，因为浮动 div 包含使用 position:absolute 的元素。

“位置：相对”确保子元素在自己的 div 中正确定位。在他们的父母中没有“亲戚”，他们将被放置在外面。

于 2013-09-12T08:53:03.067 回答
0

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

于 2009-10-20T06:35:47.540 回答
0

没有错。float指的是渲染元素的流程。position指的是该元素偏移的锚元素。如果它们是互斥的，那么 W3C 建议会将可能的选项整合到一个属性中。

于 2009-10-20T06:36:48.583 回答
0

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

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

于 2009-10-20T06:37:01.720 回答
0

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

话虽如此，您应该知道，没有什么position: relative; top: 50px;比margin-top: 50px;. 您应该对这两种方式都感到满意，我建议在这种情况下使用保证金，并且通常作为您的第一种方法。

相对定位与元素之间的流动方式相混淆。如果您稍后决定让另一个元素向左浮动并堆叠在.event元素下方，您会发现它.event与新元素的顶部 50px 重叠。当你用相对定位偏移一个元素时，它的盒子会保留在布局中，它会在没有定位的情况下渲染，所以它会与附近的元素发生奇怪的交互。

于 2009-10-20T07:13:39.177 回答