Positioning Elements

Position elements on a web page using the non-default position relative and position absolute CSS properties.

At the end of this Tutorial, you will be able to:

  • Accurately position and overlap text and image elements on a web page.

The position property

To design complex web page layouts, you need to understand and be able to use the various positioning properties of HTML elements.

For example, you may want to:

  • ‘Stick’ a navbar menu to the top of a web page that does not move when the user scrolls up and down the page.
  • ‘Stack’ text in front of an image.

The HTML position property takes five values: static, relative, absolute, fixed, and sticky.

Let's look at each of these in detail.

Downloading your sample files

In this Tutorial, you will work with the sample files containing in the following zip file. In your exercises folder, create a new sub-folder exerises-positioning and download this zip file to it.

The static position property

This is the default value of the position property. This means that if you don't set any position value for an element, its position value will be static.

Note the following:

  • Because it is the default position property, a static element is not considered ‘positioned’.
  • An element is considered ‘positioned’ only if it has any value other than static.

Elements with static positioning display directly below one another, according to their order in the HMTL code. This is called normal document flow.

See the sample positioning-exercise-1.html source code and web page.

The relative position property

If you change the position property of an element to relative, it will appear in the web page exactly as it would with the default relative positioning.

However, there is one major difference.

Elements with a relative value accepts the so-called box offset properties – top, right, bottom, and left.

These properties enable the element to be moved (offset/pushed/pulled/nudged) in any direction from its normal position.

Open the following web page and stylesheet.

  • positioning-exercise-1.html
  • positioning-style-1.css

For example if set you an element to left: 20px, the element will be placed 20 pixels to the right of where it normally would be. If you set the value to -20px, it would push the content to the left with 20px.

Apply some box-offset properties to the four div elements in the sample positioning-style-1.css stylesheet.

Typically, you use relative positioning for one or both of two reasons:

  • To change the location of that element.
  • Apply it to a parent/container element to gain control over a child element inside it that has an absolute position.

The absolute position property

Just like an element with relative positioning, an element with an absolute position value accepts the usual box offset properties – top, right, bottom, and left.

However, an absolutely positioned element is displayed:

  • Relative to the web browser window/viewport – that is, in relation to the body of the HTML file.   -or-
  • If it is a child element, relative to its parent container if that parent has a position other than the default of static.

Absolutely positioned elements are said to be removed from the normal flow of the web page. That is, they can be displayed anywhere in the browser window regardless of where they are located in the HTML file.

Setting an element as absolutely positioned element without any box-offset values will position the top left of the browser window or parent container.

Note the following about an element with absolute positioning:

  • If the element doesn't have a set width, and its left and right box-offset values are both set to zero, then the element fills the full width of the web browser window.
  • If the element doesn't have a set height, and its top and bottom box-offset values are both set to zero, then the element fills the the full height of web browser window.
  • If the element doesn't have a set width or height, and all four of its box-offset values are set to zero, then the element fills the full size of web browser window.

Add the following HTML and CSS to your sample files.

Project Hero Blocks

Overlapping elements and the z-index property

When you position elements (that is, apply a position property other than static to them), you will find that the elements often overlap. In other words, some elements will display in front of others.

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

The z-index CSS property sets the overlapping order of positioned elements. Elements with a larger z-index value display in front of those with a smaller one.

Project Hero Blocks

Apply some z-index values the div elements in the first sample web page and stylesheet.

You can close these files when finished.

Absolute positioning inside relative positioning

A parent element with relative positioning enables you to control an absolutely positioned child element inside it.

Open the following web page and stylesheet.

  • positioning-exercise-2.html
  • positioning-style-2.css

The web page should display as follows:

Project Hero Blocks

Update the CSS file as shown below, and save and redisplay the web page.

Project Hero Blocks Project Hero Blocks


  • To the hero-block outer parent div element, apply relative positioning.
  • To the container-text child div element, apply absolute positioning.
Project Hero Blocks

Save and reload the web page. It displays exactly as before.


  • In the HTML file, make four copies of the container-text child div element.
  • Apply the five box-offset classes from the linked stylesheet to these five div elements.

Save and reload the web page. It now look as shown below.

Project Hero Blocks

Overlapping text on images

Image overlay is the technique of adding text or other elements over an image. CSS offers a number of ways to achieve this effect:

  • Applying a background-image property to the container div element.
  • Adding a separate child div element to contain the text and giving that child div an absolute position.

We will use the second method.

Open the following web page and stylesheet.

  • positioning-exercise-3.html
  • positioning-style-3.css

You can see a parent container with relative positioning that has inside an image with absolute positioning.

To show the effect of styling the image in the hero-block container, the same image is also embedded outside the hero-block.

In the web browser resets of a CSS file, the img element is typically given the properties and values below.

Project Hero Blocks

To display the image at its actual size, the positioning-style-3.css stylesheet sets both the width and height of the image to auto.

In the CSS file, update the .hero-block img class as follows.

Project Hero Blocks

The image now fills the parent hero-block. Unfortunately, the image is now distorted.

Project Hero Blocks

To fix this, add the object-fit property as shown below.

Project Hero Blocks Project Hero Blocks

The image is no longer distorted and there is no empty space displayed in the outer container hero-block.

However, because the image has a different shape you can no longer see the full image. This is called the 'letter-box' effect.

You can control which part of the image is visible with the object-position property. See some possible values below.

Project Hero Blocks

Apply some of these values and notice the effect on the image inside the hero-block parent container.

When finished, set the object-position property to center center.

Responsive design and the object-position property

In the sample web page, delete the image outside the hero-block container.

Inside the hero-block container, replace the current image as shown below.

Project Hero Blocks

On desktop/laptop screens, the web page now looks as follows.

Project Hero Blocks

However, on mobile phones, the focal point (main area of visual interest) is barely visible.

Project Hero Blocks

To correct this, add a media query as shown below.

Project Hero Blocks

Your web page should now display as shown below.

Project Hero Blocks

Finally, add the following to the HTML and CSS files.

Project Hero Blocks Project Hero Blocks