DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Orgchart With CSS Flex and ZK
  • Circle Text With CSS and JavaScript
  • Subtitles: The Good, the Bad, and the Resource-Heavy
  • Loader Animations Using Anime.js

Trending

  • A Complete Guide to Modern AI Developer Tools
  • A Guide to Developing Large Language Models Part 1: Pretraining
  • Transforming AI-Driven Data Analytics with DeepSeek: A New Era of Intelligent Insights
  • How to Convert XLS to XLSX in Java
  1. DZone
  2. Coding
  3. Languages
  4. CSS Position: Relative vs Position Absolute

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!

By 
Tatjana Boskovic user avatar
Tatjana Boskovic
·
Updated May. 18, 22 · Tutorial
Likes (18)
Comment
Save
Tweet
Share
745.7K Views

Join the DZone community and get the full member experience.

Join For Free

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 - will follow the regular flow of the document, which is top-left-bottom-right to them will have no effect.
  • Relative - positioned element is positioned relative to its normal position,
  • Absolute –is relative to the first parent element that has a position other than static
  • Fixed - is displayed with respect to the viewport or the browser winder itself.
  • Sticky - 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.

CSS Element

Published at DZone with permission of Tatjana Boskovic, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Orgchart With CSS Flex and ZK
  • Circle Text With CSS and JavaScript
  • Subtitles: The Good, the Bad, and the Resource-Heavy
  • Loader Animations Using Anime.js

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!