CSS positioning

Normal document flow
Static position
Fixed position
Relative position
Absolute position
Overlapping elements

Positioning is the control over the location (position) of an element on a web page, it is controlled using the CSS position property.

To specify the exact location of positioned elements, the CSS properties are used: top, right, bottom and left. They work with all positioned elements except static ones.

Example of positioning.

Elements can overlap each other!

Display the element above the others!

CSS position property has 4 values: static, fixed, relative and absolute. Each of these values will be demonstrated below with an example of use.

Before we take a detailed look at all the positioning of elements on the page, we will have to consider what a document flow is.

Normal document flow

By default, the elements on the web page are displayed in the order in which they appear in the HTML document, that is, the block elements occupy the entire width available for them and are stacked vertically one under the other. The inline elements are aligned horizontally until all available width is occupied, after the entire width is occupied, the line will be shifted and everything will follow the new one. This ordering of elements is called a normal document flow.

Using the float or position property, you can remove an element from the normal document flow. If the element drops out from the normal document flow, then the elements that are located in the code below this element will be moved to its place on the web page.

Static position

Static refers to the default positioning for all elements on a web page. If you do not apply the position property to an element, it will be static and will be displayed on the web page according to the normal flow of the elements.

If you apply CSS top, left, right, or bottom properties to a statically positioned element, they will be ignored.

If necessary, you can set static positioning in the style sheet using the static value:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      p { position: static; }
    </style>
  </head>

  <body>
    <p>The first paragraph.</p>
	<p>The second paragraph.</p>
  </body>
</html>

Try it »

Fixed position

Elements with a fixed positioning are located on the page relative to the browser window. Such elements are removed from the normal document flow, the elements following in the flow behind the fixed element will ignore it, moving and taking its place on the web page.

It is worth noting that elements with fixed positioning can overlap other elements, hiding them completely or partially. When scrolling through long pages, they create the effect of fixed objects while remaining in the same place:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      img {
		position: fixed;
		top: 5%;
		left: 40%
	  }
    </style>
  </head>

  <body>
    <img src="flower.png">
    <pre>
      Text
      Text
      Text
      Text
      Text
      Text
      Text
      Some text
      Text
      Text
      Text
      Text
      Text
    </pre>
  </body>
</html>

Try it »

Relative position

Elements with relative positioning, like static elements, remain in the normal document flow. When applying top, left, right, or bottom properties to relatively positioned elements, they will shift relative to their location, leaving an empty space where the element originally located.

Such elements do not affect the location of the elements surrounding them, the remaining elements remain in their places and can be blocked by a relatively positioned element:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      h2 {
		position: relative;
		top: 30px;
		background-color: #ffdd99;
	  }
    </style>
  </head>

  <body>
    <h1>Header of the first level.</h1>
	<h2>Relatively positioned header.</h2>
	<h3>Header of the third level.</h3>
  </body>
</html>

Try it »

Note: elements with relative positioning are usually used as the parent for elements with absolute positioning.

Absolute position

Elements with absolute positioning are completely removed from the normal document flow, the remaining elements will occupy the space that has been freed, completely ignoring absolutely positioned elements. You can then position the element at any desired location on the web page using the top, left, right, or bottom properties.

All absolutely positioned elements are placed relative to the browser window or relative to the nearest positioned ancestor (if there is any), with the position property set to absolute, fixed, or relative.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      img {
        position: absolute;
        right: 0px;
        top: 0px;
      }
    </style>
  </head>

  <body>
	<img src="flower.png">
	<p>Change the location of the image using absolute positioning.<br> 
      Now the image will be located in the upper right corner of the page.</p>
  </body>
</html>

Try it »

Overlapping elements

When elements are out of the normal document flow, they can overlap each other. Usually, the order of the elements is in accordance with their order in the HTML code of the page, but it is possible to control the order of overlap with the CSS z-index property, the larger its value, the higher the element will be.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      div {
        position: absolute;
        width: 100px;
		height: 100px;
      }
	  .div1 {
		 background-color: #66FFFF;
		 left: 70px;
		 top: 0px;
		 z-index: 1;
	  }
	  .div2 {
		 background-color: #FFFF66;
		 left: 0px;
		 top: 30px;
		 z-index: 0;
	  }
	  .div3 {
		 background-color: #66FF66;
		 left: 33px;
		 top: 60px;
		 z-index: 2;
	  }
    </style>
  </head>

  <body>
	<div class="div1">z-index: 1;</div>
	<div class="div2">z-index: 0;</div>
	<div class="div3">z-index: 2;</div>
  </body>
</html>

Try it »