In this lesson, you’ll learn:

How to use the float property
How to use the position property
How to manage stacking order of web page elements via z-index

You've already looked at the first two bullets in the previous tutorials on Creating Layouts and Moving Elements Around the Page. In this tutorial, we will revisit these and get into much more detail. Let's get started.

How to position elements in CSS

There are two major ways to position elements on a web page — we can pick one method over another based on the page layout and the type of content:

The floating technique is used to build the website's layout when naturally flowing content is needed and different elements have to be aligned in response to each other.
We can use relative positioning or absolute positioning when the position of elements needs to be more strictly controlled.

Let's look at these two approaches in more detail.

How To Use Floats

float is a property that allows you to position elements on a web page next to each other. Float allows elements to interact with each other based on their size and size of their parent elements. It allows the element to be positioned on the left or right or have text wrapped around an image:

type=codeblock|id=adv_pos_1|autocreate=htmlcss
<!DOCTYPE html>
<html>
<head>
<style>
  img {
    float: left
  }
  p {
    float: right
  }
</style>
</head>
<body>
  <h1>Floats</h1>
  <img src="https://i.imgur.com/HeS37IN.jpg" height="140" />
  <p>This paragraph floats on the right, while the image floats on the left</p>
  <p>This paragraph floats on the right, while the image floats on the left</p>
</body>
</html>

Restoring the flow of the document

To restore the flow of the document, we apply clear: both to the first element that needs to restore the flow back to normal. So

type=codeblock|id=adv_pos_2|autocreate=htmlcss
<!DOCTYPE html>
<html>
<head>
<style>
  img {
    float: left;
  }
  p {
    float: right;
  }
  footer {
    clear: both;
  }
</style>
</head>
<body>
  <h1>Floats</h1>
  <img src="https://i.imgur.com/HeS37IN.jpg" height="140" />
  <p>This paragraph floats on the right, while the image floats on the left</p>
  <p>This paragraph floats on the right, while the image floats on the left</p>
  <footer>This needs to clear the floats</footer>
</body>
</html>

The clearfix technique

The clearfix technique is based on the usage of :before and :after pseudo-elements on the parent element. Using these, we can create hidden elements above and below the parent containing the floats, so that we can Force an Element To Self-Clear its Children. The :before pseudo-element prevents the top margin of child elements from collapsing. The :after pseudo-element prevents the bottom margin of child elements from collapsing and clears the nested floats.

<div class="group">
  <div class="is-floated"></div>
  <div class="is-floated"></div>
  <div class="is-floated"></div>
</div>

CSS:

.group:after {
  content: "";
  display: table;
  clear: both;
}

You would use this instead of clearing the float with something like <br style="clear: both;" /> at the bottom of the parent (easy to forget, not handleable right in CSS, non-semantic) or using something like overflow: hidden; on the parent (you don't always want to hide overflow).

How To Use the Position Property Effectively

The position property provides more control over an element. It can be used with four values.

Static

Elements have the static property by default. Elements will be positioned as coded with default behavior. Here the position of both elements is set to static:

type=codeblock|id=adv_pos_3|autocreate=htmlcss
<!DOCTYPE html>
<html>
<head>
<style>
div.element1 {
    position: static;
    background: #FF0000;
}
div.element2 {
    position: static;
    background: #808080;
}
</style>
</head>
<body>
    <h2>position: static;</h2>
    <p>An element with position: static</p>
    <div class="element1">
        Element 1
    </div>
    <div class="element2">
        Element 2
    </div>
</body>
</html>

Output:

Relative

With relative positioning, box offset properties can be set. The box offset properties allow an element to be positioned exactly. This property can take the values - top, right, bottom and left. Elements can be set to overlap one another without their positions going in a disarray.

In the above example, the element, Element 2 can be positioned in relation to Element 1.

With the following modification in the code, Element 1 will be placed over Element 2.

div.element1 {
    position: relative;
    top: 20px;
    left: 20px;
    background: #FF0000;
}

This is what the complete code looks like:

type=codeblock|id=adv_pos_33|autocreate=htmlcss
<!DOCTYPE html>
<html>
<head>
<style>
div.element1 {
    position: relative;
    top: 20px;
    left: 20px;
    background: #FF0000;
}
div.element2 {
    position: static;
    background: #808080;
}
</style>
</head>
<body>
    <h2>position: relative;</h2>
    <div class="element1">
        Element 1
    </div>
    <div class="element2">
        Element 2
    </div>
</body>
</html>

Output:

Absolute

An element can be set to an absolute position. The element whose absolute position is set will be positioned in relation to the parent element that contains it or the body of the page in case the parent element is not available. With the following modification in the code, one can set the exact position for Element 1.

div.element1 {
    position: absolute;
    top: 50px;
    left: 20px;
    background: #FF0000;
}

This is what the complete code looks like:

type=codeblock|id=adv_pos_34|autocreate=htmlcss
<!DOCTYPE html>
<html>
<head>
<style>
div.element1 {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #FF0000;
}
div.element2 {
    position: static;
    background: #808080;
}
</style>
</head>
<body>
    <h2>position: absolute;</h2>
    <div class="element1">
        Element 1
    </div>
    <div class="element2">
        Element 2
    </div>
</body>
</html>

Output:

Fixed

This value allows the element to be placed in a fixed position relative to the browser. The element will always be in that position irrespective of the page being scrolled up or down. This property does not work well with IE6. Suppose the position of element 1 is changed to fixed and and element 2 is such that the user has to scroll, the output will be as follows:

type=codeblock|id=adv_pos_45e|autocreate=htmlcss
<!DOCTYPE html>
<html>
<head>
<style>
  div.element1 {
    position: fixed;
    top: 150px;
    left: 10px;
    background: #FF0000;
  }
  div.element2 {
    width: 500px;
    height: 300px;
    overflow: scroll;
    padding-left: 150px
  }
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed</p>
<div class="element1">
  Element 1
</div>
<div class="element2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
</div>
</body>
</html>

How to get a fixed Header or Footer

The position:fixed allows developers to build a fixed header or footer that is static in one part of the page. If the following CSS code is added, a header will be displayed at the top of the page.

div.header
{
  background: #808080;
  top: 0;
  left: 0;
  position: fixed;
  right: 0;
}

Try it out in code below:

type=codeblock|id=code2e66e0|autocreate=htmlcss
<!DOCTYPE html>
<html>
<head>
<style>
div.header{
  background: #808080;
  top: 0;
  left: 0;
  position: fixed;
  right: 0;
}
div.element1 {
    position: static;
    background: #FF0000;
}
div.element2 {
    position: static;
    background: #808080;
}
</style>
</head>
<body>
    <div class="header">Fixed header</div>
    <div class="element1">
        Element 1
    </div>
    <div class="element2">
        Element 2
    </div>
</body>
</html>

Output:

How to Manage Stacking Order of Web Page Elements

Elements can be positioned on top of one another. The z-index property allows to manage the order of stacking of elements in a page.

The page elements are positioned upon the z-axis as they appear within the Document Object Model (DOM). Using the z-index property, this order can be changed. Elements can be given z-index values. The element with the highest z-index value will appear on the top regardless of its placement in the DOM. To make it effective, first apply a position value of either relative, absolute, or fixed. Then set the z-index property.

z-index not set

type=codeblock|id=adv_pos_5|autocreate=htmlcss
<!DOCTYPE html>
<html>
<head>
<style>
img {
  
    left: 0px;
    top: 0px;
   
}
</style>
</head>
<body>
    <h1>The z-index Property</h1>
    <img src="https://i.imgur.com/HeS37IN.jpg" height="140" />
    <p>Because the image has no z-index value and no position, it will be placed below the heading.</p>
</body>
</html>

z-index set but position not set

type=codeblock|id=adv_pos_6|autocreate=htmlcss
<!DOCTYPE html>
<html>
<head>
<style>
img {
  
    left: 0px;
    top: 0px;
    z-index: -1;
}
</style>
</head>
<body>
<h1>The z-index Property</h1>
 
<img src="https://i.imgur.com/HeS37IN.jpg" height="140" />
 
<p>Though the image has a z-index value set to -1, the position is not set and so it will be placed below the heading.</p>
 
</body>
</html>

z-index value and position value set

type=codeblock|id=adv_pos_7|autocreate=htmlcss
<!DOCTYPE html>
<html>
<head>
<style>
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
</style>
</head>
<body>
<h1>The z-index Property</h1>
 
<img src="https://i.imgur.com/HeS37IN.jpg" height="140" />
 
<p>Because the image has a z-index of -1 and the position is set, it will be placed behind the heading.</p>
 
</body>
</html>

Summary

To recap, in this tutorial we learned

How to use the float property
How to use the position property
How to manage stacking order of web page elements via z-index