Key Concepts In Positioning Elements with CSS

CSS treats each HTML element as if it is in its own box. This box will either be a block-level box or an inline box. It has the following positioning types that allow you to control the layout of a page normal flow, relative positioning, and absolute positioning.

Goal

Follow along to learn:

Building Blocks

CSS treats each HTML element as if it is in its own box. This box will either be a block or an inline box.

Block-level boxes start on a new line and act as the main building blocks of any layout, while inline boxes flow between surrounding text. You can control how much space each box takes up by setting the width of the boxes (and sometimes the height, too). To separate boxes, you can use borders, margins, padding, and background colors.

Block Level Elements

Start On A New Line

Examples include:

<h1>, <p>, <ul>, <li>

Example of Block Level Elements:

Cool programmers:

Donec tristique dignissim ipsum, vel egestas erat dignissim sit amet. Etiam ante mauris, elementum et sapien in, feugiat fringilla elit. Sed est dolor, condimentum vitae velit iaculis, pharetra sollicitudin nulla. Donec nec augue metus. Proin eleifend felis vitae mauris aliquam, in pretium eros lobortis. Nulla sapien quam, porta ac sollicitudin sed, facilisis sit amet ex. Nullam suscipit eu sapien eget volutpat. Donec imperdiet lectus vitae ipsum imperdiet lacinia. Aliquam id mattis justo. Vivamus nisi lacus, posuere non nunc in, aliquam porta mauris. Duis nisl tellus, tristique quis enim ac, lobortis consequat dolor. Phasellus at dictum velit. In hac habitasse platea dictumst. Praesent porttitor tellus sed velit semper sodales. Vestibulum a sapien gravida ipsum mattis scelerisque ut sagittis metus.

Inline Elements

Flow In Between Surrounding Text

Examples include:

<em>, <strong>, <img>

Example of Inline Level Elements:

This is text wrapped by an em tag, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. This is text wrapped by a strong tag, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.

HTML5 logoSome text wrapping an image. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.

Containing Elements

If one block-level element sits inside another block-level element then the outer box is known as the containing or parent element.

It is common to group a number of elements together inside a <div> (or other block-level) element. For example, you might group together all of the elements that form the header of a site (such as the logo and the main navigation). The <div> element that contains this group of elements is then referred to as the containing element.

Example of Containing Elements:

Lorem Ipsum

  • Lorem
  • Ipsum
  • Dolor

This is text wrapped by an em tag, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. This is text wrapped by a strong tag, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.

HTML5 logoSome text wrapping an image. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.

The black lines in this diagram represent <div> elements. The header (containing the logo and navigation) are in one <div> element, the main content of the page is in another, and the footer is in a third. The <body> element is the containing element for these three <div> elements. The second <div> element is the containing element for two paragraphs of lorem ipsum text and an image of the HTML5 logo.

A box may be nested inside several other block-level elements. The containing element is always the direct parent of that element.

Controlling the Position of Elements

CSS has the following positioning types that allow you to control the layout of a page: normal flow, relative positioning, and absolute positioning. You specify the positioning type using the position property in CSS.

To indicate where a box should be positioned, you may also need to use box offset properties to tell the browser how far from the top or bottom and left or right it should be placed.

Normal flow

position: static

In normal flow, each block-level element sits on top of the next one. Since this is the default way in which browsers treat HTML elements, you do not need a CSS property to indicate that elements should appear in normal flow, but the syntax would be: position: static.

HTML:

<body>
  <h1>Lorem Ipsum</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.
  </p>
</body>

CSS:

body {
  color: #333;
  font-family: sans-serif;
}

h1 {
  background-color: #efefef;
  padding: 10px;
}

p {
  width: 300px;
}

Result:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.

I have not specified a width property for the heading element, so you can see how it stretches the width of the entire browser window by default. The paragraphs are restricted to 300 pixels wide. This shows how the elements in normal flow start on a new line even if they do not take up the full width of the browser window.

The paragraphs appear one after the other, vertically down the page.

Relative Positioning

position: relative

Relative positioning moves an element in relation to where it would have been in normal flow. For example, you can move it 10 pixels lower than it would have been in normal flow or 10% to the right. You can indicate that an element should be relatively positioned using the position property with a value of relative. You then use the offset properties (top or bottom and left or right) to indicate how far to move the element from where it would have been in normal flow. To move the box up or down, you can use either the top or bottom properties. To move the box horizontally, you can use either the left or right properties. The values of the box offset properties are usually given in pixels, percentages or ems. This does not affect the position of surrounding elements; they stay in the position they would be in in normal flow.

HTML:

<body>
  <h1>Lorem Ipsum</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.
  </p>

  <p class="example">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.
  </p>
</body>

CSS:

  body {
    color: #333;
    font-family: sans-serif;
  }

  h1 {
    background-color: #efefef;
    padding: 10px;
  }

  .example {
    position: relative;
    top: 10px;
    left: 100px;
  }

Result:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.

The second paragraph has been pushed down and right from where it would otherwise have been in normal flow.

Absolute positioning

position: absolute

When the position property is given a value of absolute, the box is taken out of normal flow and no longer affects the position of other elements on the page. (They act like it is not there.) The box offset properties (top or bottom and left or right) specify where the element should appear in relation to its containing element.

HTML:

<body>
  <h1>Lorem Ipsum</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.
  </p>
</body>

CSS:

  body {
    color: #333;
    font-family: sans-serif;
  }

  h1 {
    margin: 0;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

Result:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.

The heading is positioned to the top left, and the paragraphs start at the top of the screen (as if the heading were not there).

Fixed positioning

position: fixed

This is a form of absolute positioning that positions the element in relation to the browser window, as opposed to the containing element. Elements with fixed positioning do not affect the position of surrounding elements and they move when the user scrolls up or down the page.

HTML:

<body>
  <h1>Lorem Ipsum</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.
  </p>
</body>

CSS:

  body {
    color: #333;
    font-family: sans-serif;
  }

  h1 {
    margin: 0;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .p--first {
    margin-top: 100px;
  }

Result:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.

In this example, the heading has been positioned to the top left hand corner of the browser window. When the user scrolls down the page, the paragraphs disappear behind the heading. The <p> elements are in normal flow and ignore the space that the <h1> element would have taken up. Therefore, the margin-top property has been used to push the first <p> element below where the fixed position <h1> element is sitting.

Overlapping Elements

z-index

When you use relative, fixed, or absolute positioning, boxes can overlap. If boxes do overlap, the elements that appear later in the HTML code sit on top of those that are earlier in the page. If you want to control which element sits on top, you can use the z-index property. Its value is a number, and the higher the number the closer that element is to the front. For example, an element with a z-index of 10 will appear over the top of one with a z-index of 5.

HTML:

<body>
  <h1>Lorem Ipsum</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.
  </p>
</body>

CSS:

  h1 {
    background-color: #efefef;
    margin: 0;
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }

  p {
    position: relative;
    top: 70px;
    left: 70px;
  }

Result:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis pharetra quam. In at convallis arcu, et semper tellus. Pellentesque feugiat mi libero, eget faucibus lacus ultricies sit amet. Vestibulum sagittis nec est a tincidunt. Sed at tellus lacinia, efficitur elit sed, ornare justo. Aliquam nec pretium quam. Sed sit amet nibh et urna elementum feugiat. Fusce a turpis eget tortor malesuada luctus eget sit amet sapien. Fusce quis posuere sem, sit amet imperdiet eros. Cras consequat fringilla consequat.

To ensure that the <h1> element stays on top, we use the z-index property on the rule for the <h1> element.

Conclusion

the position property is really useful if you want to layout parts of your website offset from where they should appear since they do not affect how other elements are laid out.

javascript
Rest Operator In JavaScript

The rest operator actually uses the same syntax as the spread operator. It's usage determines whether you're using it as the spread or rest operator.

javascript
comparing and cloning arrays in JavaScript

Unlike other data types you might have seen so far, it is not possible to correctly compare two arrays by using the === or == comparison operator. Two primitive data type values can be equal, but no two arrays are the same, even if they have the same elements inside.