CSS: Fix Element to Window (position:fixed)

What is Position Fixed

position:fixed puts an HTML element into its own layer, and position it relative to the browser window.

The normal flow of elements will flow as if that element doesn't exist.

use the following CSS properties to set the offset position:

• top
• bottom
• left
• right

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 which comes in front using CSS: z-index