负边距和重叠 div答案

【问题标题】：negative margins and overlapping divs负边距和重叠 div
【发布时间】：2013-11-21 04:53:43
【问题描述】：

我玩过负边距，我知道我的问题的解决方案，但为什么侧边栏 div 与侧边栏标题 div 重叠？我想了解这种情况下 css 的行为。

http://codepen.io/anon/pen/sjpqv

【问题讨论】：

因为你在侧边栏有负的左边距。尝试从没有负边距的代码开始，然后仅将其添加到标题中。您可以看到整个标题 + 侧边栏向左移动。因此，如果您在侧边栏添加另一个 -350，那么它当然会重叠。
还有什么问题？？这就是负边距的作用
我不明白这个问题，这“是”边距的作用。你的问题无异于问比萨为什么尝起来像比萨。

标签： html css margin

【解决方案1】：

当两个 div 元素向左浮动时，每个元素将并排放置在左侧。他们的顺序是基于在 html 中输入的顺序。

它们都在一个类名为 container 的 div 中，左边距为 350px，这意味着它的内容（两个浮动 div）将从左侧移动 350px。

然后在第一个 div .sidebar-header 上输入 350 像素的负左边距，这会导致该 div 向左移到它最初位于文档最左侧的位置。这也会导致第二个浮动 div .sidebar 保持在一边。第一个浮动 div .sidebar-header 的宽度为 330px。所以第二个 div 距离左侧 330px，因为它仍然在第一个 div 的一侧。

当您将 350px 的负左边距放置到第二个 div 时，您也将它移动到文档的最左侧，因为它仅 330px 远，与第一个 div 重叠。例如，如果第一个 div .sidebar-header 的宽度大于 350 像素，那么它们最终不会重叠。

【讨论】：

那么每个具有负边距的浮动元素都停止遵循内部顺序？