Why does this goofy positioning cause changes on this site?
If you go to this site: http://www.marketwatch.com/story/social-networking-for-social-smokers-2011-05-11 and go into the styles and change <div id="blanket"></div> to having a position of static, and then add a wrapper outside of it (or on the body) put position:relative on it, the page changes drastically (the header basically overlaps the content area at that point.
Everything I know about positioning tells me this shouldn't be happening, but I can't quite figure out why. I wasn't able to find anything in the CSS to cause this behavior as well. Anyone have any ideas?
Edit: This isn't related to my job or anything but my friend brought it to my attention and I thought it was a brain tickler.
I've tried doing this:
<body>
<div style="position: relative;">
<div style="position: static;">
<div id="blanket">...</div>
开发者_JS百科 </div>
</div>
</body>
And this doesn't cause the problem, so there is clearly something on that page, but I can't figure it out. It does this in chrome/FF/IE.
Try inspecting the elements in the header. You will see the following style rules on the div#topchrome element:
position: absolute;
top: 0;
width: 981px;
z-index: 10000;
The position on this element (absolute, with top: 0) causes it to be pushed to the very top of the page (default, unmodified behavior). If you change body to have position: relative;, you have basically told #topchrome to be "absolute, but relative to where body is." So now, #topchrome is actually at the top of body, which is the very top of the page. Even so, that still shouldn't change things. The real culript is the third actor, div#breakingnews, which has the property margin-top: 177px. In the new flow, we have:
body { position: relative; }
div#breakingnews { margin-top: 177px; }
div#chrome
div#topchrome { position: absolute; top: 0; }
So, div#breakingnews is causing the content to be pushed down. Indeed, changing div#blanket to have position: static has nothing to do with it, since it is static (the default) to begin with.
加载中,请稍侯......
精彩评论