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
barnetobeka
Courses Plus Student 10,895 Pointsdifference between fixed and relative positioning of an element
i have tried to understand that fixed positioning is relative to the browser and relative is relative to its normal position but it can't click guys some help
2 Answers
Alexander Acker
18,123 PointsI would say think of fixed as sticking an element outside the document workflow and almost like a piece of gum stuck on your computer screen. I agree that it might be a weird analogy but no matter how far you down your scroll on your webpage, that gum, or fixed positioned element isn't going anywhere because you've taken it outside the document so it pretty much just layers itself on top of everything.
A relative position is completely different. Think of it as a static element that will do the basics until you decide to apply specific positioning to it. Give it a "Top" property of say 10px, your element will move 10px down from it's original location. Provide no positioning property and it will resolve like it's normal self. Utilizing relative positioning on an element is also a way to control absolute children elements that may exist within.
I've created a codepen that can allow you to play around with both position types. You'll notice that I've given the relative property a top position of 20px which has moved the element down slightly from it's normally placed position.
http://codepen.io/alexacker08/pen/EZjNdO
This article below is also pretty good and goes into much greater detail around how 'relative' positioning deals with the Z-index property as well as how it's utilized to position children elements with absolute positioning.
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Hope some of this helps!
Mike Schaming
13,925 PointsMy understanding is fixed positioning is based on the elements position in the viewport. Relative positioning changes the elements position from where it would normally be in the document flow. You can shift an element from where it is currently located by using offsets. Also, Relative positioning sets the positioning context for items with Absolute positioning.
example of fixed:
.main-header { position: fixed; width: 100%; top: 0; }
sets .main-header at the top of your page.
If you wanted an element's position to be relative to where it is in the .main-header, you would set .main-header with a position of Relative. In this way, whatever offsets you use with for Absolute positioned elements will be in relation to .main-header.
.main-header { position: relative; *.main-header becomes the positioning context }
.class { position: absolute; *position is relative to its parent .main-header. Offsets will place inside .main-header top: 10px; }
Mike Schaming
13,925 PointsIf you have the time, check out this article. It explains it way better than I can. Good luck!
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/