CSS: Fix Element Position Relative 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.

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

♥ ♥ ♥

Here's the code:

<div style="
position:fixed;
right:10px;
bottom:10px;">♥ ♥ ♥</div>

〔►see CSS: Units

You can also use left:10px and top:10px to offset the position.

When you have 2 elements that are both position:fixed, they may overlap. You can control the overlap using z-index. See: CSS Example: “position:fixed”, overlap, z-index.

Reference

Visual formatting model#fixed-positioning

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.