CSS: 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 flows 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="box638">FIXED BOX</div>

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

Overlapping Elements

• CSS: z-index