Hi, I am having a little trouble understanding a few of the position properties, more specifically the absolute and relative positioning. should they be used for a specific situation?
I’ll try to explain this the best way I can.
The position:relative basically makes a visual (NOT PHYSICAL) copy of the element, which, if you then move with top/right/bottom/left, will only move the visual copy you see. It will not move it physically. However, that’s the only thing that position:relative basically does. It does create a stacking context for any position:absolute elements, which basically means that if there is a child within position:relative, and that child is position:absolute, any coordinates/positioning will be BASED off that parent with position:relative.
Take a lok at this example.
http://codepen.io/ryanreese09/pen/Wvxbrm
Remove that parent position:relative and see the absolute element then ignore the parent it clearly is in, and instead, bases its positioning off the viewport.
Basically, position:relative does almost nothing except help out position:absolute, and give you the ability to also make use of the z-index property, which is useful for stacking elements on top of each other, or creating those sorts of effects. E.g. overlays.
Now, position:absolute, as you can gather from that example, is sort of a free bird. If that is set, it is taken completely out of the flow of the document. It recognizes no other elements. Parent elements do not recognize it is there! Go back to that codepen. See how #wrapper has a height set? It NEEDS that or else you would see no red background. Go ahead; remove that background:red;. See how the red background disappears? That’s because the parent now thinks it’s empty, even if that child element is there. That’s because it’s position:absolute.
This is useful for effects like dropdowns (this is how they are done), but it should be used sparingly, and in controlled situations. Due to the fact it is not in the flow, it can’t be used willy nilly or else it’s easy for it to break as you go responsive with your webpage. Coordinate properties like top/right/bottom/left are almost NEEDED, or highly recommended (there are certainly situations where you SHOULD use auto coordinates (default) but generally you’ll want to set a top/right/bottom/left (any combination)). Otherwise, the browser will guess. Guessing browsers are more likely to vary browser to browser so it’s more likely to fail. They are pretty good about guessing but there are still instances where you’ll see it not position right.
Has this answered your question? Anything specific you were wondering about?
Not sure if I understand this analogy…when you mean physical and visual?
after reading this part I understand it better, so it acts like a backbone to a div in order to use position:absolute? so whatever content you want to manipulate stays within that div?
Ok so what I mean by physical vs visual, is, when you do something like position:relative;top:100px;…That element still technically is there. It’s not like margin where the element actually moves. The flow is still maintained and no elements are disrupted by this. The browser still THINKS that element is there (and it is). But YOU get the visual of it moving. That’s the simplest I can explain it. It’s a bit more complmicated than that.
Visually though, you will see that element move. On the page though? The document flow? Nothing will change at all since it doesn’t physically move.
Exactly. And the other main benefit, is quick easy access to layer elements. E.g. if you need an element to be on top of another…you can force the issue by position:relative (and then a z-index).
Not exactly how I’d word it. Whatever content you want to manipulate will base its position initially off that parent div. You can, obviously, move it wherever you want. But yes it acts as a baseline for the absolute element to work off of.
Oh yeah thats what I meant to say
Just curious but why is it that when you remove the position:absolute from the child the background color goes all the way across the div? and when put back it gets smaller?
When you remove it, #child then reverts back to the normal property. That is a block element, which stretches as far as possible. It fills all the space it can.
Now, when position:absolute is on there, it has shrink-to-fit width behavior so it will only be as wide as needed.
Ok so in a way its what the browser is seeing vs what I am seeing?
ohh, so then position:absolute makes a way so it wont have to be so wide and be based on what is needed because of the fact you are working within a div?..
For position:relative, almost. You can think of it that way. You moving it with top/right/bottom/left WILL basically be an issue of what YOU see vs the browser.
You moving it via margins will make it so the physical version of it moves; so you AND the browser will be on the same page 
.
^ The above is all for position:relative.
ok thanks I have a better understanding of this property now…
The best way to expand your understanding now would be to play with it . Just try to control position:absolute, with use of position:relative.
You’ll get it .
Alright
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.