CSS: Fix Element to Window

By Xah Lee. Date: . Last updated: .

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:

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

Here is a example. You'll see a yellow box fixed to the lower right of the window.

I AM FIXED HERE

Here's the code:

<div id="fixed65146">I AM FIXED HERE</div>
#fixed65146 {
position:fixed;
right:20px;
bottom:20px;
font-size:3em;
color:red;
background-color:yellow;
border:solid thick green;
}

Overlapping Elements

When you have 2 elements that are both position:fixed, they may overlap. You can control the overlap using, for example,

z-index:23

The number can be any integer.

[see CSS: z-index]

Reference

Visual formatting model#fixed-positioning

Back to CSS Position: static, relative, fixed, absolute

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc