负边距和重叠的div

时间:2013-11-20 20:10:36

标签: html css margin

我玩了负边距并且我知道我的问题的解决方案,但为什么侧边栏div重叠侧边栏标题div?在这种情况下,我想了解css的行为。

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

1 个答案:

答案 0 :(得分:0)

当浮动两个div元素时,每个div元素将并排放置在左侧。他们的订单基于在html中输入的订单。

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

然后在第一个div .sidebar-header上输入一个350px的负左边距,这会导致将div移动到文档最左侧的左侧。这也导致第二个浮动div .sidebar保持在其侧面。第一个浮动div .sidebar-header的宽度为330px。所以第二个div从左侧开始是330px,因为它保留在第一个div的一侧。

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