Locking an element (div) to the top or bottom of the browser window.

[DevInCode]

Gmail does this when it says "Sending.." or "working.." even when
you scroll down the page the little box stays top and center.
Perfectly smooth.

www . comodo . com does this, their logo in the bottom right.

How is this done?

[Dormilich]

position: fixed;

or some Javascript if IE

[Frinavale]

position:fixed works in IE 7 and 8 now :)

[Dormilich]

ah, so they finally did it? ;)

[DevInCode]

This is my css/html. Works perfectly in FF. In IE the z-index is ignored and when I add things to the UL it pushes things down.

<div id="added-to-cart" style="height: auto; position:fixed; top:0px; left:0px; width: 100%; display:none; z-index: 250"><ul id="cart-added-list" style="z-index: 250"></ul></div>

[Frinavale]

Could you please elaborate on "pushes things down"?
Please note that the z-index will only work for elements that have an position:absolu te (or I position:relati ve too).....

[DevInCode]

In firefox the ul expands the div that its in. it just overlays whats underneath it.
In IE rather than lay on top of content it disobeys the z-index and moves the content down as items are added to it.

[DevInCode]

Hmmm in FF position fixed work with z-indicies.

[Frinavale]

Ok I think I experienced something similar once...where elements with a style of position:relati ve were appearing on top of elements with a style of position:fixed or position:absolu te.

To fix this I had to move the position:fixed element under the position:relati ve element in the HTML.

For example, this wouldn't work:

<div style="position:fixed"></div>
<div style="position:relative"></div>

But this would:

<div style="position:relative"></div>
<div style="position:fixed"></div>

You can move the position:fixed element to the appropriate place on the page using CSS styles....

[DevInCode]

More markup than I wanted, but it works :) Thanks for your help!

<div style="position:absolute; left:0px; top:0px; z-index: 200"><div id="added-to-cart" style="height: auto; position:fixed; top:0px; left:0px; width: 100%; display:none; z-index: 250"><ul id="cart-added-list" style="z-index: 250"></ul></div></div>

[DevInCode]

I was mistaken. I should have known. This loses the fixed position part of it that I needed. so it behaves as it should, but it stays at the top of the page rather than the top of the browser window.

[Frinavale]

You shouldn't wrap the position:fixed div in a position:absolu te div...this is probably why you're having problems......

[DevInCode]

makes sense. But fixed stll doesn't do what I think ti should in IE. Instead of putting it at (0,0) its putting it on the page where it is in the HTML.

[Frinavale]

I just tested it and it's positioned at 0,0 for me in IE (8):

<div id="added-to-cart" style="height: auto; position:fixed; top:0px; left:0px; width: 100%; z-index: 250">
  <ul id="cart-added-list">
    <li>abc</li>
  </ul>
</div>

[DevInCode]

Even when I paste your code and take mine out... it still shows up inline rather than 0,0

Could doc type affect this?