Why does div.main's margin-top: 50px; move div.fixed down? Shouldn't an element with position: fixed; be fixed in the location it would have appeared with position: static; (at least when top/left are not specified)?
<!DOCTYPE html>
<html>
<head>
<style>
/* optional: */
.fixed {
border: 1px solid red;
}
.main {
height: 1000px;
border: 1px solid green;
}
/* relevant: */
.fixed {
position: fixed;
}
.main {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="fixed">Fixed</div>
<div class="main">Inside main.</div>
</body>
</html>In the example above, I'd expect "Fixed" to appear 50 pixels above "Inside main." but instead they are stacked on top of each other. My best clue so far is that adding something visible before div.fixed makes it work as expected. Anyone know what's going on here?
