CSS: Fixing Element Position Relative to Window

Xah Lee, 2005-01-30, …, 2012-04-24

This page show you how to create a widget that is fixed to a position in the window, using CSS.

Here is a example. You'll see a yellow box fixed to the lower right corner of your window. Try to resize or scroll the window. You see that it sticks there.

To fix a element's position to window, use the “position” attribute with value “fixed”. Like this:

<div style="position:fixed; right:1ex; bottom:3ex">
<p>♥ ♥ ♥</p>
</div>

The right:1ex means offset it from the right border of the window, by 1 “ex”. (ex means the height of the letter “x”.)

You can also use “left” and “top” to offset the position.

When you have 2 elements that are both position:fixed, they may overlab. You can control the overlab using “z-index”. See: CSS Example: “position:fixed”, overlap, z-index.