Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Introduction to HTML and CSS (2016) Getting Familiar with HTML and CSS HTML, CSS, and Web Development

Nafitha Mohamed
Nafitha Mohamed
2,637 Points
Posted by Nafitha Mohamed
Nafitha Mohamed
2,637 Points

Position

What is difference between absolute and relative positioning

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Absolute positioning defines the position of an element in relation to the root element of a document. But it can also be in relation to the next parent element that has relative positioning. So elements that have only 1 parent, that is the next level down from the root element will be ositioned relative to the viewport (the browser screen)

Relative positioning is positioned relative to it's normal position (if an element was assigned no specific position property)

Hope this helps :)

SRIMUGAN J
PLUS
SRIMUGAN J
Courses Plus Student 5,345 Points
SRIMUGAN J
SRIMUGAN J
Courses Plus Student 5,345 Points

Relative Position - relatively adjust your position according to your browser screen(view port) whereas absolute position moves according to your relative position. (Note: position absolute works like floating element) for eg try this <html> <body> <div class="box1"> <div class="box2"> </div> </div> </body> <html>

css:

.box1{ display block; width: 100px; height: 100px; position : relative; left: 50px; top: 50px; border: 1px solid; background-color: yellow; }

.box2{ display block; width: 100px; height: 100px; position : absolute; left: 50px; top: 50px; border: 1px solid; background-color: yellow;

}

In the above example box 2 position moves according to your box 1.

Hope this helps :)

akoren
akoren
673 Points

Unfortunately I'm not sure how this example makes it clear what the difference is. If I change box2 css to also be position: relative, the output looks the same.