Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS Position: Relative vs Position Absolute

DZone's Guide to

CSS Position: Relative vs Position Absolute

In this article, we explore some ways to work with CSS to enhance the way you interact with the HTML of your page. Read on for more!

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

The CSS position property defines, as the name says, how the element is positioned on the web page.

If you are interested in reading about the font properties, articles about the relative font size and CSS columns might be of interest. 

So, there are several types of positioning: static, relative, absolute, fixed, sticky, initial, and inherit. First of all, let's explain what all of these types mean.

  • Static - this is the default value, all elements are in order as they appear in the document.
  • Relative - the element is positioned relative to its normal position.
  • Absolute - the element is positioned absolutely to its first positioned parent.
  • Fixed - the element is positioned related to the browser window.
  • Sticky - the element is positioned based on the user's scroll position.

Now that we have explained the basics, we will talk more about the two most commonly used position values - relative and absolute.

What Is Relative Positioning?

When you set the position relative to an element, without adding any other positioning attributes (top, bottom, right, left) nothing will happen. When you add an additional position, such as left: 20px the element will move 20px to the right from its normal position. Here, you can see that this element is relative to itself. When the element moves, no other element on the layout will be affected.

There is a thing you should keep in mind while setting position - relative to an element limits the scope of absolutely positioned child elements. This means that any element that is the child of this element can be absolutely positioned within this block.

After this brief explanation, we need to back it up, by showing an example.

In this example, you will see how the relatively positioned element moves when its attributes are changed. The first element moves to the left and top from its normal position, while the second element stays in the same place because none of the additional positioning attributes were changed.

HTML

<div id="first_element">First element</div> 
<div id="second_element">Second element</div> 

CSS

#first_element { 
  position: relative; 
  left: 30px; 
  top: 70px; 
  width: 500px; 
  background-color: #fafafa; 
  border: solid 3px #ff7347; 
  font-size: 24px; 
  text-align: center; 
} 

#second_element { 
  position: relative; 
  width: 500px; 
  background-color: #fafafa; 
  border: solid 3px #ff7347; 
  font-size: 24px; 
  text-align: center; 
} 


What Is Absolute Positioning?

This type of positioning allows you to place your element precisely where you want it.

The positioning is done relative to the first relatively (or absolutely) positioned parent element. In the case when there is no positioned parent element, it will be positioned related directly to the HTML element (the page itself).

An important thing to keep in mind while using absolute positioning is to make sure it is not overused, otherwise, it can lead to a maintenance nightmare.

The next thing, yet again, is to show an example.

In the example, the parent element has the position set to relative. Now, when you set the position of the child element to absolute, any additional positioning will be done relative to the parent element. The child element moves relative to the top of the parent element by 100px and right of the parent element by 40px.

HTML

<div id=”parent”>
  <div id=”child”></div>
</div>

CSS

#parent { 
  position: relative; 
  width: 500px; 
  height: 400px; 
  background-color: #fafafa; 
  border: solid 3px #9e70ba; 
  font-size: 24px; 
  text-align: center; 
} 

#child { 
  position: absolute; 
  right: 40px; 
  top: 100px; 
  width: 200px; 
  height: 200px; 
  background-color: #fafafa; 
  border: solid 3px #78e382; 
  font-size: 24px; 
  text-align: center; 
} 

Through these examples, you have seen differences between absolutely and relatively positioned elements.

We hope this article clarified some doubts and will help in any future projects.

Check out other detailed articles related to CSS properties such as this one: CSS Positions,  SASS and LESS Nesting.

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:
html ,css ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}