Course: CSS Basics

Element Positioning [6/15]

Positioning helps you to arrange elements on your page and do it precisely and with flexibility. Positioning is used to create complex "multi-layer" interfaces, for instance, pop-up windows or galleries, and design small decorative elements.

The main property responsible for positioning is position: it switches between different element positioning modes. Four more properties are: top, right, bottomand left; they define where exactly the element will be positioned. And, last but not least, the z-index property: it controls the order of layers on your page.

In this task, you will change the mode of element positioning from standard to absolute, and move the element around the page a little.

In more detail, we will tackle the theory and practice of element positioning in the upcoming "Positioning" course.

Do it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Element Positioning</title> </head> <body> <h1>How to stay out of the flow?</h1> <p>First of all, let's look at the concept of the document flow. It determines the way the elements are arranged on your HTML page.</p> <p class="p-absolute">Absolutely positioned elements are entirely removed from the flow.</p> <p>Other elements sort of stop seeing them, considering the area covered by the absolutely positioned elements as empty.</p> </body> </html>
.p-absolute { padding: 20px; background-color: rgba(0, 255, 0, 0.25); }
HTML Academy

Enable absolute positioning for one of the paragraphs.

  1. Add to the CSS rule for the p-absolute class, the position: absolute; property.
  2. Then, add property left: 100px; to the same class
  3. and property bottom: 200px;.

The properties we have used here are discussed in more detail in the upcoming "Positioning" course.

Theory Check Next