Hello all!
was wondering…
do i need an absolute position for a relative one or vice versa? I think i have seen samples of work where only element is given a relative position but the other elements are not absolute.
I’d imagine the absolute default is the body?
z index. kinda the same thing. if you have a lot of elements/divs/component on your page. can you only give he z-index to one or two they you wish to affect or do all of them have to be indexed?
Thank you all have a great weekend.
Hi,
Hmm not such a simple question actually:)
Perhaps its better to just define how positioning works and then it may make it clearer to you.
When you absolutely position something it is placed in relation to the nearest ancestor that has a position defined other than static. If no ancestor has a position defined (either relative or absolute) then your element is placed in relation to the body (effectively the viewport).
In simple terms if you absolutely position an element and its parent is either position:relative or position:absolute then that child elements takes its starting position as the top left of that parent element. If the parent element is them moved then so does the child. If on the other hand the element’s parent (and any other ancestors have no position defined then the child element is placed in relation to the viewport and should the parent be moved the child will not care a jot and stay where it was 
Z-index defines the stacking strategy for positioned elements. It does not apply to elements that are static (position:static - the default). Therefore if you want to apply a z-index to a static element it must first be set to position:relative and then the z-index will apply.
A higher z-index means the element will be closer to the viewer so we say this element is on top and vice versa a lower z-index means the element is further away from the user and will be under elements with a higher z-index. However this is not the whole story because once a positioned parent element has a z-index defined (other than auto) then it becomes atomic and its children can never escape from this context. If the parent is z-index: 1 then all its children will not sit on elements outside this context that have a greater z-index than the parent. These child elements may have high-z-indexes but they will only apply in relation to other children of this main parent. It will have no effect outside of the parent’s stacking context. This means that an element with a z-index of 10000 will not sit on top of en element that has a z-index of 2 if that other element is outside the current stacking context.
Another thing to consider is that if the parent is position:relative but has no z-index applied then it is automatically assigned a z-index of auto. This effectively means it ha no stacking level and in this case a child element with a z-index applied will interact with other elements outside this stacking context in the normal way. To muddy the waters a bit more here you should know that ie7 and under don’t understand z-index:auto and always apply a z-index of :zero (0) to all positioned elements by default. This makes a positioned element in ie7 and under always atomic and its children always tied to the z-index of the parent.
Lastly negative z-indexes are allowed but a child element can never be behind the positioned and z-indexed parent’s background no matter what the z-index is (older browsers used to get this wrong also but are correct these days).
Hope that explains it
Awesome explanation.
Thank you Paul!
just a follow up question to clarify things for me please.
So if i have ten divs in page but want to assign z-indexes and positioning to three of them…
7 will be static,not affected as nothing is assigned to them.
1 will be relative. the parent w/a relative position and a z index. whose default z would be 0
2 will be absolute. the children will have absolute positions and they can have the z index assigned. child a w/a z of 800 will be lower than child be w/ a z of 9999.
And the two children can be tweaked or animated by using the positioning and it will not affect the 7 static elements. so while i can give an absolute position to child a i can also on hover change that position and animate it.
am I correct, did I understand correctly?
Thank you
D
If the 7 elements are not nested in a positioned context then the z-index will not affect them.
1 will be relative. the parent w/a relative position and a z index. whose default z would be 0
It will only be “0” if you make it so. The default is auto (effectively no stacking level).
2 will be absolute. the children will have absolute positions and they can have the z index assigned. child a w/a z of 800 will be lower than child be w/ a z of 9999.
Yes as long as the two elements they are in the same context or if the parent has no z-index defined then they can be separate contexts.
And the two children can be tweaked or animated by using the positioning and it will not affect the 7 static elements. so while i can give an absolute position to child a i can also on hover change that position and animate it.
Absolute elements are removed from the flow and have no affect on their parents or other elements. z-index just controls the stacking level of the element and whether it will be above or below another element.