∑ Home ◇ Math ◇ Computing ◇ Arts ◇ Words ◇ Literature ◇ Music ◆

CSS Example: Position Fixed Relative to Window

Xah Lee, 2005-01

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.

I Stick to the Corner no matter what.

Solution

To create something that is fixed to a position in the window, use the “position” attribute with value “fixed”. Like this:

<div style="position:fixed; right:1ex; bottom:1ex">
<p style="background-color:yellow">I Stick to the Corner no matter what.</p>
</div>

The “right:1ex” means offset it from the right border of the window, by 1 “ex”. (ex means the width 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.