负边距与相对定位

Posted 2023-03-06

【中文标题】负边距与相对定位

【英文标题】：Negative margins vs relative positioning

【发布时间】：2011-07-12 11:44:44

【问题描述】：

我遇到过许多涉及负边距的布局技术，例如用于侧边栏定位的classic。似乎这些技术可以很容易地应用于相对定位。

所以不要这样：

.sidebar 
    margin-left:-600px;

一个人会这样做：

.sidebar 
    position:relative;
    left:-600px;

看起来相对定位在垂直方向上甚至可能更清晰， 因为顶部边距操纵可能会受到边际崩塌问题等的影响。

两者相比有什么优势，或者它们实际上是等效的吗？

谢谢-

【问题讨论】：

我认为负左值在 safari 中不起作用，position relative。

【参考方案1】：

我猜相对定位会将内容向左移动，但原始空间将被它占用，除非您也将下一个元素设为相对。但是，如果使用负边距，内容及其原始空间都会发生偏移。

【参考方案2】：

位置属性和负边距都有用处，没有一个比另一个更好。这取决于你想要做什么。当您想将每个元素从左上到下移动时，您不会相对或绝对定位每个元素。假设您有一个简单的<p> 标签，您想将其移到左侧，您不会给它一个位置属性来移动它。保证金是正确使用的方法。边距会影响您网站上其他元素的位置，因为位置会浮动而不影响其他元素的定位。 position 属性虽然可以以多种方式使用，但它主要用于使您的站点成为 ex 的主要元素：例如，页眉、页脚、包装器、菜单、左侧内容、右侧内容。

【讨论】：

@Hussein- 你能减少你的答案吗？ “保证金会影响您网站上其他元素的位置，而位置不会。”应该是你的答案——你所有的其他陈述都是主观的。

【参考方案3】：

简单地说，相对定位会在视觉上改变相对元素的内容，而不会影响它在页面流中的位置。另一方面，边距会相对于其自然位置推动或拉动元素，从而影响布局。