CSS: Fix Element to Window

This page show you how to use CSS to fix a element's position relative to window.

This is done by using position:fixed

With offset like this:

• top:20px;
• right:20px;

When a element has position:fixed, that element goes into its own layer. The normal flow of elements will flow as if that element doesn't exist.

Example

You'll see a yellow box fixed to the top right of the window.

Here is the code:

<div id="fixed65146">I AM FIXED HERE</div>

#fixed65146 {
position:fixed;
top:20px;
right:20px;
font-size:2rem;
color:red;
background-color:yellow;
border:solid thick red;
}

Overlapping Elements

When you have 2 elements that are both position:fixed, they may overlap. You can control the overlap using z-index. [see CSS: z-index]