为什么这种愚蠢的定位导致了这个网站的变化？

Question

如果您访问此网站：http://www.marketwatch.com/story/social-networking-for-social-smokers-2011-05-11并进入样式并将<div id="blanket"></div>更改为具有静态位置，然后在其外部（或在正文上）添加包装{put} {1}}，页面变化很大（标题基本上与内容区域重叠。

我所知道的关于定位的一切都告诉我这不应该发生，但我无法弄明白为什么。我无法在CSS中找到任何导致此行为的内容。有人有什么想法吗？

编辑：这与我的工作或其他任何事情无关，但我的朋友引起了我的注意，我认为这是一个大脑痒痒。

我试过这样做：

position:relative

这不会导致问题，因此该页面上显然有一些内容，但我无法弄明白。它在chrome / FF / IE中执行此操作。

Answer 1

尝试检查标题中的元素。您将在div#topchrome元素上看到以下样式规则：

position: absolute;
top: 0;
width: 981px;
z-index: 10000;

此元素上的position（absolute，top: 0）会将其推送到页面的最顶层（默认情况下，未修改的行为）。如果您将body更改为position: relative;，则基本上告诉#topchrome是“绝对的，但相对于body的位置”。所以现在，#topchrome实际上位于正文的顶部，这是页面的顶部。即便如此，仍然不应该改变一切。真正的culript是第三个角色div#breakingnews，它具有属性margin-top: 177px。在新流程中，我们有：

body { position: relative; }
     div#breakingnews { margin-top: 177px; }
     div#chrome
          div#topchrome { position: absolute; top: 0; }

因此，div#breakingnews导致内容被推下。实际上，将div#blanket更改为position: static与此无关，因为它始于static（默认值）。