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
mrx3
8,742 PointsI'm having trouble understanding relative and absolute positioning. Any help would be great.
I understand static positioning because it's the default position. I kind of understand relative position, and how I can set something like a image, or div, or even text to a relative position, and it won't have a effect on the other elements. I know that absolute position is where you can put a element exactly where you want it but, it can block other elements from view. For instance if I set a image to absolute position and there is text next to the image when the browser window gets resized the image can block some of the text.
So I guess my question/s are if we are supposed to think of mobile design first, why would we use either relative or absolute position? It seems to me, and I can be way off on this that using these positions on elements could cause havoc on a layout because they would block the view of the information on a site because the positions don't scale down when you resize the browser window. For example, a picture could block text on a mobile phone but maybe the layout would look perfect on desktop.
My last question is a big one. Beside positioning images using absolute or relative I have no idea where else these two positions would be used and why. Can anyone give me some help with this? I understand CSS pretty good but, this has been a struggle for me, big time. I feel so stupid. Thank you in advance for any help.
Below is a couple of code pens I made using relative and absolute positioning just messing around. In the absolute one I set the wrapper position to relative because I wanted the shapes to relative to that parent element.
Relative: http://codepen.io/mike316/pen/qEbNNw
Absolute: http://codepen.io/mike316/pen/azdZZP
1 Answer
Andrew Stelmach
12,583 PointsHi Mr. X. There's quite a lot in your question, but I think the main thing you need to remember about relative and absolute positioning is that their positions are relative to different things.
They essentially look the same on the screen, but WHERE they are on the screen is decided by different factors.
My notes on this sums this up quite well:
Position: static/relative/absolute/fixed. Default is static.
Static; (default value) a normal box laid-out according to the normal flow of the document. It ignores other positioning properties eg "left: 150px;"
Relative; similar to static, in that it changes an element without influencing the layout of other elements. It positions an element relative to its position in the document flow. Can use the top/right/bottom/left offset properties to indicate how far to move the element from where it would have been in the normal document flow. It kind of leaves an invisible box where it used to be. Eg "Left: 150px;" = 150px from the left.
Absolute - completely removes the element from the document flow, so it doesn't affect the position of other elements.
The absolute position of an element will always be relative to the first parent element that has a position other than 'static'.
If none of the parent elements in the nesting chain has a positioning property other than 'static', the absolute position of an element will be relative to the browser window or viewport.
So, if you DON'T want an absolutely positioned element to be positioned relative to the viewport, you just have to give one of the divs (that are higher up in the nesting chain than the element you are positioning) 'position: relative;'.
In terms of when you would use these things, so far I've only ever used them to 'tidy things up'. For example, the other day when building a page using Bootstrap, a checkbox mysteriously sat outside of its container. The quickest way to fix this was just to give it an id in the html and in the css give it 'position: relative;' and 'left: 15px;'. That just nudged it to the right by 15px and it was perfect.
I guess if I was repositioning an element like this, but the 'invisible box' factor interfered with things, maybe I would use absolute positioning instead.
I'm sure there are plenty more examples, but hopefully this has shed some light on things.
mrx3
8,742 Pointsmrx3
8,742 PointsSorry for the late reply to you and thank you for your help, Your example of the checkbox was great.