Modules > Layout > Understanding CSS Positioning

Understanding CSS Positioning

You can position elements on the page using the CSS position property. The possible values include static, relative, absolute, and fixed.

Static

static is simply the default for the position property. A static element is not considered positioned.

Fixed

fixed positioning is used to make an element stick to a spot on the page. It’s most often used to create headers or footers that stick on the top or bottom of the browser window. Fixed elements will be positioned relative to the browser viewport.

Keep in mind that fixed positioning does not work very well on most mobile browsers.

Relative

relative positioning is used to position an element relative to its original location. It’s used in two primary contexts:

Shift an element position

You can use relative positioning to shift where an element will display on the page. The spot where the element would be is reserved, but the element itself will move. Overlapping can (and will) happen.

Relative Positioning Example #1

Below are three normal boxes:

Relative Positioning Example #2

Here we change the positioning of the green box:

.green {
  position: relative;
  bottom: 20px;
  left: 20px;
}

The green box is shifted slightly and now overlaps the red box:

• Shifted 20px up from the original bottom edge
• Shifted 20px right from the original left edge

Set a positioning context

Relative positioning is often used to simply set the positioning context. An element is considered positioned if it has any value other than static. Positioning an element creates a positioning context for all of its children.

Relative positioning is used for this because by itself it will not change anything in the document. See example below for more information on this. It’s easiest to understand by example.

Absolute

absolute positioning removes an element from the document flow completely. The space where the element would have been will disappear.

Absolutely positioned elements will be positioned relative to their nearest positioning content. This means, the closest containing element that is also positioned. If nothing else on the page is positioned, the element will be positioned relative to the browser viewport.

If you do not specify a value for top, right, bottom, or left, the element will remain in its original position in the document but other elements will overlap it. The positioned element will show on top.

Absolute Positioning Examples

Absolute Positioning Example #1

Below are three normal circles inside a containing block (shown with the blue border):

Absolute Positioning Example #2

Now we set the green circle to have absolute positioning, but don't position it:

.green {
  position: absolute;
}

The green circle remains in its original position in the document layout, but is completely removed from the document flow. Elements around the green circle act as if it doesn't exist and fill in the space where it would be.

Absolute Positioning Example #3

Now we set the green circle to be 0 pixels from the left edge of the page:

.green {
  position: absolute;
  left: 0;
}

Oh hai circle

Now the circle moves all the way to the left edge of the containing block. Since no parent element is positioned, the circle gets positioned relative to the viewport window. The space that the circle would have filled has also disappeared.

Absolute Positioning Example #4

Here we change the positioning context of the circle by setting its container (.containing-block) to be relatively positioned. This time we'll set the circle to be 0 pixels from the right edge of the positioning context:

.containing-block {
  position: relative;
}

.green {
  position: absolute;
  right: 0;
}

Now the circle moves all the way to the right edge of the containing block. The space that the circle would have filled has also disappeared.

Overlapping Elements and the z-index Property

Overlapping Elements

Once you start positioning elements, you'll find that they frequently overlap. At times you may need to adjust how they overlap. The default settings are as follows:

• Positioned elements will appear in front of non-positioned elements
• If both elements are positioned, ones that are lower in the HTML will appear in front of others.

Overlapping Elements Example #1

All three elements are positioned and overlap. They show in the order they appear in the source code.

.containing-block {
  position: relative;
}

.red, .green, .blue {
  position: absolute;
}
.red {
  left: 0;
  top: 0;
}
.green {
  left: 0;
  top: 25px;
}
.blue {
  left: 30px;
  top: 0;
}

Overlapping Elements Example #2

Now the blue element is not positioned. The positioned elements appear in front of it.

.containing-block {
  position: relative;
}

.red {
  position: absolute;
  left: 0;
  top: 0;
}
.green {
  position: absolute;
  left: 0;
  top: 25px;
}
.blue {
  position: static;
  left: 30px;
  top: 0;
}

z-index Property

You can adjust how elements overlap by modifying the z-index property. The z-index property takes a numerical value that can be either positive or negative. Lower numbers move an element to the back of the page (behind other elements) while higher numbers move an element to the front of the page. The default z-index is 0.

Note: The z-index property can only be applied to elements that are positioned.

z-index Property Example #1

.red {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}
.green {
  position: absolute;
  left: 0;
  top: 25px;
  z-index: -10
}
.blue {
  position: absolute;
  left: 30px;
  top: 0;
}

In this example we set a higher z-index for the red circle, causing it to move in front of the other elements. We set a negative value for the green circle, which caused it to move behind the other circles.

Is the green circle also behind the containing example box? Use the Developer Tools to change the background of the example box to aqua to find out.

Back to top

Related Resources

• Positioning [MDN Tutorials]
• Uniquely Positioning Elements [Shay Howe]

Modules > Layout > Understanding CSS Positioning