Fixed/Absolute Position

CSS position: fixed

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used set the final location of the element.

A fixed element does not leave a gap in the page where it would normally have been located.

This <div> element has position: fixed;

Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:

Example

div.fixed {
  position: fixed;

bottom: 0;
  right: 0;
  width:
300px;
  border: 3px solid #73AD21;
}

CSS position: absolute

An element with position: absolute; is positioned relative to the nearest positioned ancestor (with position other than static).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal document flow, and can overlap other elements.

Here is a simple example:

This <div> element has position: relative;

This <div> element has position: absolute;

Here is the CSS that is used:

Example

div.relative {
  position: relative;

width: 400px;
  height: 200px;
  border: 3px solid green;
}

div.absolute {
  position: absolute;

top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid
  red;
}

Positioning Text On an Image

How to position text on an image:

Example

<img src="img_5terre_wide.jpg" alt="Cinque Terre" style="width:100%;height:auto;opacity:0.5"> Bottom Left Top Left Top Right Bottom Right Centered

Try it Yourself: