It's unfortunate that I have to bring up another question related to position:fixed, but after going through various other questions and forum threads, I'm still not clear on this particular issue.
The code below is a simple illustration of how I've been using position:fixed in a project so far. My original understanding was that position:fixed fixes the position relative to the first parent container with a set position, and then remains fixed regardless of viewport scrolling. However, I've now learned that it actually positions relative to the outermost container (i.e., the html tag), and position:absolute positions relative to the first parent container with a non-static position.
From reading other posts on SO, it seems that the effect I was trying to achieve with position:fixed is one that many others have attempted, only to find out that it cannot be done with CSS alone: That is, positioning an element relative to a container and keeping it in place relative to the viewport when scrolling.
What puzzles me is that what I believed to have achieved - at least in FF and IE8. In the code example below, the "fixed right pane content" starts positioned next to the red "centre scrollable content" box and aligns vertically with the top of the center content. The center content can be scrolled, but the right-hand content stays fixed in its position as if it were initially static in the normal flow of the document but then remains fixed to the viewport.
I now realize that this works in IE8 and FF simply because I did not specify top/bottom/left/right attributes for the fixed element. If I do provide those attributes, the fixed element immediately becomes positioned relative to the viewport.
Until now, I assumed - perhaps naively - that if no relative positions are specified, position:fixed would default to placing the element where it would normally be statically placed. At least FF and IE8 seem to be doing just that.
However, testing in Safari reveals that Safari positions the fixed element to the left of its container. In other words, without any positioning, my position:fixed element is neither where it would be when statically placed nor positioned at 0,0 relative to the viewport.
Have I been relying on poorly defined behavior so far, and should I consider using a JavaScript solution to achieve this fixed positioning? Or, is this behavior well-defined for IE/FF; and could anyone explain why Safari places it as they do?
<style type="text/css">
#content-centre {
margin: 0 auto;
width: 900px;
}
#header {
height: 55px;
position: fixed;
top: 0;
width: 990px;
}
#left-pane {
position: fixed;
top: 12px;
border: 1px green solid;
}
#main-pane {
left: 200px;
position: relative;
top: 66px;
width: 760px;
border: 1px yellow solid;
}
#container-1 {
border-top: 1px solid #FFFFFF;
float: right;
min-width: 130px;
padding-left: 20px;
border: 1px blue solid;
}
#container-0 {
margin-right: 20px;
min-height: 470px;
overflow: auto;
padding: 10px 0;
position: relative;
border: 1px red solid;
}
.side-info-list-fixer {
position: fixed;
}
</style>
<div id="content-centre">
<div id="header">
</div>
<div id="left-pane">
Fixed left pane content
</div>
<div id="main-pane">
<div id="page-module-containers">
<div id="container-1">
<div class="side-info-list-fixer"> Fixed right pane content </div>
</div>
<div id="container-0">
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
<p>Centre scrollable content</p>
...
</div>
</div>
</div>
</div>