CSS positioning

Introduction

The position property specifies how HTML elements are positioned.

The possible values are: static, relative, absolute, fixed, and sticky.

The top, right, bottom, and left properties allow authors to define the location of positioned elements.

The top, right, bottom, and left properties will be covered in a later slide deck.

The z-index property allows authors to specify the position of the element along the z-axis.

The z-index property will also be covered in a later slide deck.

position: static

/* Static */
p {
  position: static;
}

The static position is the default value and lays the element out according to the normal flow of the document.

The top, right, bottom, left and z-index properties have no effect on statically positioned elements.

position: absolute

/* Absolute */
p {
  position: absolute;
}

Behaviour

An element set to absolute will be removed from the normal document flow.

Absolutely-positioned elements are positioned relative to their closest positioned ancestor.

If no ancestor has positioning, they are positioned relative to the initial containing block.

Elements that are in normal document flow will ignore the absolutely-positioned element and re-flow accordingly.

Top, bottom, left, right

Absolutely-positioned elements can be positioned using any combination of top, right, bottom or left.

/* Top */
p {
  position: absolute;
  top: 20px;
}

Width

By default, absolutely-positioned elements are set to width: auto which means they collapse to the width of the widest content inside.

Absolutely-positioned elements are also set to left: auto and right: auto which also means they collapse.

This means that if you set apply absolute-positioning to a standard block-level element, it will immediately change from stretched to collapsed.

Absolutely-positioned elements can be sized using a length or percentage value.

/* Width with length value */
p {
  position: absolute;
  width: 200px;
}

/* Width with percentage value */
p {
  position: absolute;
  width: 30%;
}

Absolutely-positioned elements can be stretched by setting left and right values and leaving the width value undefined.

/* Left and right */
p {
  position: absolute;
  left: 10px;
  right: 10px;
}

If an absolutely-positioned element has been given left and right values as well as a width, the right value will be ignored.

/* Left, right and width */
p {
  position: absolute;
  left: 10px;
  width: 200px;
  right: 10px;
}

However, in cases where the dir property (which defines the direction of text) is rtl (right to left), the left value would ignored instead.

<!-- HTML markup -->
<div class="content" dir="rtl">
  ...
</div>

Height

By default, absolutely-positioned elements are set to height: auto which means they collapse to suit the height of content inside.

Absolutely-positioned elements can be given height using a length or percentage value.

/* Height using length */
p {
  position: absolute;
  height: 200px;
}

/* Height using percentage */
p {
  position: absolute;
  height: 50%;
}

The height of absolutely-positioned elements can be stretched by setting top and bottom values and leaving the height value undefined.

/* Top and bottom */
p {
  position: absolute;
  top: 10px;
  bottom: 10px;
}

If an absolutely-positioned element has been given top and bottom values as well as a height, the bottom value will be ignored.

/* Top, bottom and height */
p {
  position: absolute;
  top: 10px;
  height: 200px;
  bottom: 10px;
}

Margin

Margins push the element away from its position.

Margins applied to absolutely-positioned elements do not collapse with any other margins.

Padding

Padding will add to the width or height of a collapsed or sized absolutely-positioned element.

Padding will reduce the width or height of the content area of a stretched absolutely-positioned element.

Border

Border will add to the width or height of a collapsed or sized absolutely-positioned element.

Border will reduce the width or height of the content area of a stretched absolutely-positioned element.

Stacking context

If the element is given a z-index value of anything other than "auto", it will create a new stacking context.

Exercise 1: Style some absolutely-positioned elements

Open this HTML file in an editor:
exercises-start/exercise-209-01.html

Write a CSS rule to set the element with a class of example1 to position: absolute.

Notice how the element sits above the other content, and how the other content reflows below the element.

/* Add styles here */
.example1 {
  position: absolute;
}

Write a second CSS rule to set the element with a class of example2 to position: absolute.

Also, set the element with a width of 200px.

This example shows how adding a length width affects the element.

/* Add styles here */
.example2 {
  position: absolute;
  width: 200px;
}

Write a third CSS rule to set the element with a class of example3 to position: absolute.

Also set the element with a width of 50%.

This example shows how adding a percentage width affects the element.

/* Add styles here */
.example3 {
  position: absolute;
  width: 50%;
}

Write a fourth CSS rule to set the element with a class of example4 to position: absolute.

Also set the element with left: 0 and right: 0.

This example shows how an element’s width can be stretched.

/* Add styles here */
.example4 {
  position: absolute;
  left: 10px;
  right: 10px;
}

Write a fifth CSS rule to set the element with a class of example5 to position: absolute.

Also set the element with left: 0, right: 0 and width: 300px.

This example shows how the right value is ignored when left and width values are present.

/* Add styles here */
.example5 {
  position: absolute;
  left: 0;
  right: 0;
  width: 300px;
}

Write a sixth CSS rule to set the element with a class of example6 to position: absolute.

Also set the element with left: 150px, top: 0 and height: 50px.

This example shows how adding a length height affects the element.

/* Add styles here */
.example6 {
  position: absolute;
  left: 150px;
  top: 0;
  height: 50px;
}

Write a seventh CSS rule to set the element with a class of example7 to position: absolute.

Also set the element with left: 150px, top: 0 and height: 50%.

This example shows how adding a percentage height affects the element.

/* Add styles here */
.example7 {
  position: absolute;
  left: 250px;
  top: 0;
  height: 50%;
}

Write an eigth CSS rule to set the element with a class of example8 to position: absolute.

Also set the element with left: 350px, top: 0 and bottom: 0.

This example shows how an element’s height can be stretched.

/* Add styles here */
.example8 {
  position: absolute;
  left: 350px;
  top: 0;
  bottom: 0;
}

Write a ninth CSS rule to set the element with a class of example9 to position: absolute.

Also set the element with left: 450px, top: 0, bottom: 0 and height: 100px.

This example shows how the bottom value is ignored when top and height values are present.

/* Add styles here */
.example9 {
  position: absolute;
  left: 450px;
  top: 0;
  bottom: 0;
  height: 100px;
}

Write a tenth CSS rule to set the element with a class of example10 to position: absolute.

Also set the element with margin: 30px.

This example shows how the margin affects an absolutely-positioned element.

/* Add styles here */
.example10 {
  position: absolute;
  margin: 30px;
}

Write an eleventh CSS rule to set the element with a class of example11 to position: absolute.

Also set the element with padding: 30px.

This example shows how the padding affects an absolutely-positioned element.

/* Add styles here */
.example11 {
  position: absolute;
  padding: 30px;
}

Write a twelfth CSS rule to set the element with a class of example12 to position: absolute.

Also set the element with border: 30px solid red.

This example shows how the border affects an absolutely-positioned element.

/* Add styles here */
.example12 {
  position: absolute;
  border: 30px solid red;
}

Check your work against the finished HTML file:
exercises-finished/exercise-209-01.html

position: relative

/* Relative */
p {
  position: relative;
}

Behaviour

An element set to relative will be removed from the normal document flow.

Relatively-positioned elements are positioned relative to their original position in normal flow.

Elements that are in normal document flow will behave as if the positioned element was still in normal flow - leaving space for it.

Top, bottom, left, right

Relatively-positioned elements can be positioned using any combination of top, right, bottom or left.

/* Top using length */
p {
  position: relative;
  top: 20px;
}

Width

Relative positioning can be applied to any element regardless of whether they are block-level, inline or inline-block.

When relatively-positioning is applied, these elements will remain block-level, inline or inline-block elements.

By default, block-level elements will spread to the width of the containing block or initial containing block.

When given relative-positioning, block-level elements will maintain their dimensions and be positioned relative to their original position.

Relatively-positioned block-level elements can be given a length or percentage width, like normal block-level elements.

/* Width using length */
p {
  position: relative;
  width: 200px;
}

By default, inline elements will collapse to the width of content inside the element.

When given relative-positioning, inline elements will remain collapsed and be positioned relative to their original position.

For relatively-positioned inline elements width will be ignored, like normal inline elements.

Height

By default, block-level, inline and inline-block elements are set to height: auto.

This means they collapse to the height of the tallest content inside.

Block-level and inline-block relatively-positioned elements can be sized using a length or percentage value.

/* Height using length */
p {
  position: relative;
  height: 200px;
}

However, for inline relatively-positioned elements, height will be ignored.

Margin

Margin can be applied to all sides of relatively-positioned elements.

For block-level and inline-block relatively-positioned elements, margins will affect content on all sides.

Margins applied to the left and top will push the element away from its position.

In the case of stretched block-level elements, margins can sometimes reduce the width of the overall element.

For inline relatively-positioned elements, margins will affect content on either side but not content above or below.

Margins applied to the left will push the element away from its position. Top margin will have no effect.

Padding

Padding can be applied to all sides of relatively-positioned elements.

For block-level and inline-block relatively-positioned elements, padding will affect content on all sides.

For stretched block-level elements, padding can sometimes reduce the width of content area of an element.

For sized block-level elements, padding can add to the overall dimensions of the element.

For inline relatively-positioned elements, padding will be added to all sides, increasing the overall dimensions of the element.

However, this padding will only affect content on either side but not content above or below.

Border

Border can be applied to all sides of relatively-positioned elements.

For block-level and inline-block relatively-positioned elements, border will affect content on all sides.

For stretched block-level elements, border can sometimes reduce the width of content area of an element.

For sized block-level elements, border can add to the overall dimensions of the element.

For inline relatively-positioned elements, border will be added to all sides, increasing the overall dimensions of the element.

However, this border will only affect content on either side but not content above or below.

Stacking context

If the element is given a z-index value of anything other than "auto", it will create a new stacking context.

Exercise 2: Style some relatively-positioned elements

Open this HTML file in an editor:
exercises-start/exercise-209-02.html

Write a CSS rule to set the element with a class of example1 to position: relative.

Also set the element with top: 20px and left: 20px.

/* Add styles here */
.example1 {
  position: relative;
  top: 20px;
  left: 20px;
}

Write a second CSS rule to set the element with a class of example2 to position: relative.

Also set the element with width: 200px.

/* Add styles here */
.example2 {
  position: relative;
  width: 200px;
}

Write a third CSS rule to set the element with a class of example3 to position: relative.

Also set the element with height: 100px.

/* Add styles here */
.example3 {
  position: relative;
  height: 100px;
}

Write a fourth CSS rule to set the element with a class of example4 to position: relative.

Also set the element with top: 20px, left: 20px and margin: 10px.

/* Add styles here */
.example4 {
  position: relative;
  top: 20px;
  left: 20px;
  margin: 10px;
}

Write a fifth CSS rule to set the element with a class of example5 to position: relative.

Also set the element with top: 20px, left: 20px and padding: 10px.

/* Add styles here */
.example5 {
  position: relative;
  top: 20px;
  left: 20px;
  padding: 10px;
}

Write a sixth CSS rule to set the element with a class of example6 to position: relative.

Also set the element with top: 20px, left: 20px and border: 10px solid red.

/* Add styles here */
.example6 {
  position: relative;
  top: 20px;
  left: 20px;
  border: 10px solid red;
}

Check your work against the finished HTML file:
exercises-finished/exercise-209-02.html

position: fixed

/* Fix using lengthed */
p {
  position: fixed;
}

Behaviour

An element set to fixed will be removed from the normal document flow.

Fixed-positioned elements are positioned relative to the screen’s viewport. The element does not move when the page is scrolled.

Elements that are in normal document flow will ignore the fixed-positioned element and re-flow accordingly.

Top, bottom, left, right

Fixed-positioned elements can be positioned using any combination of the following properties: top, right, bottom, left.

/* Top using length */
p {
  position: fixed;
  top: 20px;
}

Width

By default, fixed-positioned elements are set to width: auto which means they collapse to the width of the widest content inside.

Fixed-positioned elements can be sized using a length or percentage value such as width: 200px.

/* Width using length */
p {
  position: fixed;
  width: 200px;
}

Fixed-positioned elements can be stretched by setting left and right values and leaving the width value undefined.

/* Left using length */
p {
  position: fixed;
  left: 10px;
  right: 10px;
}

If an fixed-positioned element has been given left and right values as well as a width, the right value will be ignored.

/* Left, right and width */
p {
  position: fixed;
  left: 10px;
  width: 200px;
  right: 10px;
}

Height

By default, fixed-positioned elements are set to height: auto which means they collapse to suit the height of the content inside.

Fixed-positioned elements can be sized using a length or percentage value such as height: 200px.

/* Height using length */
p {
  position: fixed;
  height: 200px;
}

Fixed-positioned elements can be stretched by setting top and bottom values and leaving the height value undefined.

/* Top, bottom */
p {
  position: fixed;
  top: 10px;
  bottom: 10px;
}

If a fixed-positioned element has been given top and bottom values as well as a height, the bottom value will be ignored.

/* Top, bottom and height */
p {
  position: absolute;
  top: 10px;
  height: 200px;
  bottom: 10px;
}

Margin

Margins push the element away from its position.

Margins applied to fixed-positioned elements do not collapse with any other margins.

Padding

Padding will add to the width or height of a collapsed or sized fixed-positioned element.

Padding will reduce the width or height of the content area of a stretched fixed-positioned element.

Border

Border will add to the width or height of a collapsed or sized fixed-positioned element.

Border will reduce the width or height of the content area of a stretched fixed-positioned element.

Stacking context

If the element is given a z-index value of anything other than "auto", it will create a new stacking context.

Exercise 3: Style some fixed-positioned elements

Open this HTML file in an editor:
exercises-start/exercise-209-03.html

Write a CSS rule to set the element with a class of example1 to position: fixed.

Also set the element with top: 0 and left: 0.

/* Add styles here */
.example1 {
  position: fixed;
  top: 0;
  left: 0;
}

Write a second CSS rule to set the element with a class of example2 to position: fixed.

Also set the element with top: 50px, left: 50px and width: 200px.

/* Add styles here */
.example2 {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 200px;
}

Write a third CSS rule to set the element with a class of example3 to position: fixed.

Also set the element with top: 100px, left: 100px and height: 100px.

/* Add styles here */
.example3 {
  position: fixed;
  top: 100px;
  left: 100px;
  height: 100px;
}

Write a fourth CSS rule to set the element with a class of example4 to position: fixed.

Also set the element with top: 150px, left: 150px and margin: 10px.

/* Add styles here */
.example4 {
  position: fixed;
  top: 150px;
  left: 150px;
  margin: 10px;
}

Write a fifth CSS rule to set the element with a class of example5 to position: fixed.

Also set the element with top: 200px, left: 200px and padding: 10px.

/* Add styles here */
.example5 {
  position: fixed;
  top: 200px;
  left: 200px;
  padding: 10px;
}

Write a sixth CSS rule to set the element with a class of example6 to position: fixed.

Also set the element with top: 250px, left: 250px and border: 10px solid red.

/* Add styles here */
.example6 {
  position: fixed;
  top: 250px;
  left: 250px;
  border: 10px solid red;
}

Check your work against the finished HTML file:
exercises-finished/exercise-209-03.html

position: sticky

/* Sticky */
p {
  position: -webkit-sticky;
  position: sticky;
}

Behaviour

An element set to sticky will be removed from the normal document flow.

They are treated as relatively-positioned until their containing blocks crosses a specified threshold, at which point they are treated as fixed.

Elements that are in normal document flow will behave as if the positioned element was still in normal flow - leaving space for it.

Top, bottom, left, right

Stickily-positioned elements can be positioned using any combination of the following properties: top, right, bottom, left.

/* Top using length */
p {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

Width

Stickily-positioned elements will behave like relatively-positioned elements in relation to their widths.

Height

Stickily-positioned elements will behave like relatively-positioned elements in relation to their heights.

Margin

Margin can be applied to all sides of stickily-positioned elements.

Just like relatively-positioned elements, margin will behave differently for block-level and inline elements.

Padding

Padding can be applied to all sides of stickily-positioned elements.

Just like relatively-positioned elements, padding will behave differently for block-level and inline elements.

Border

Border can be applied to all sides of stickily-positioned elements.

Just like relatively-positioned elements, border will behave differently for block-level and inline elements.

Stacking context

Any stickily-positioned element will create a new stacking context.

Exercise 4: Style some sticky-positioned elements

Open this HTML file in an editor:
exercises-start/exercise-209-04.html

Write a CSS rule to set the element with a class of contacts-heading to position: sticky.

Also set the element with position: -webkit-sticky for Webkit browsers that do not support position: sticky.

As with all browser-specific values, the -webkit-sticky value should be placed above the native sticky value.

Finally set the element with top: 0, for when the element scrolls out of the viewport.

/* Add styles here */
.contacts-heading {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

Note that the Alphabetical headings should “stick” to the top of the viewport as the page scrolls up.

Check your work against the finished HTML file:
exercises-finished/exercise-209-04.html