如果您访问此站点:http://www.marketwatch.com/story/social-networking-for-social-smokers-2011-05-11并进入样式并更改<div id="blanket"></div>有一个静态的位置，然后在它外面(或 body 上)添加一个包装器把 position:relative在它上面，页面发生了巨大的变化(此时标题基本上与内容区域重叠。
我所知道的关于定位的一切都告诉我这不应该发生，但我不太明白为什么。我也无法在 CSS 中找到任何导致此行为的内容。有人有什么想法吗？
编辑:这与我的工作或其他任何事情都无关，但我的 friend 让我注意到了它，我认为这是一个大脑发痒的问题。
我试过这样做:
<body>
<div style="position: relative;">
<div style="position: static;">
<div id="blanket">...</div>
</div>
</div>
</body>
这不会导致问题，所以该页面上显然有一些内容，但我无法弄清楚。它在 chrome/FF/IE 中执行此操作。
最佳答案
尝试检查 header 中的元素。您将在 div#topchrome 元素上看到以下样式规则:
position: absolute;
top: 0;
width: 981px;
z-index: 10000;
此元素上的位置(absolute，top: 0)导致它被推到页面的最顶部(默认，未修改的行为)。如果您将 body 更改为具有 position: relative;，您基本上已经告诉 #topchrome 是“绝对的，但相对于 的位置 body 是。”所以现在，#topchrome 实际上位于 body 的顶部，也就是页面的最顶部。即便如此，这仍然不会改变事情。真正的罪魁祸首是第三个 Actor 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 (默认值)开始.
关于css - 为什么这个愚蠢的定位会导致这个网站发生变化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5970184/