Menu
I am new to the world of coding as well as CSS. Having read a number of articles regarding relative and absolute positioning, my understanding is as follows. However, I am unsure if an absolute position should be the child of a parent relative position or vice versa.
static, relative, absolute and fixed.relative position it is still part of the normal flow of the document. However, it has the ability to be offset by the properties top, right, bottom and left.z-index value and is automatically positioned above static elementsBased on this information, does this mean that elements with the position absolute should be children of elements with the position relative or vice versa or does it not matter?
If it does not matter, when would you make them dependent upon one another e.g. parent-child relationship?
547
Absolute In position: relative , the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element.
Relative - the element is positioned relative to its normal position. Absolute - the element is positioned absolutely to its first positioned parent. Fixed - the element is positioned related to the browser window.
If you position it as absolute , then you're positioning it relative to its closest ancestor which is fixed or relative ... Clearly, nothing can be absolute and relative at the same time. Either you want the element to position itself based on another ancestor's position or based on the page flow.
fixed : the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.
There is not really a parent-child relationship.
Relative positioning has nothing to do with absolute positioning. Relative positioning is the same as normal static positioning except that it can be offset top/right/bottom/left, as you explain. The "top/right/bottom/left" values are relative to wherever the element would normally exist in the flow. If you leave out these values, the element is still relatively positioned but it is positioned exactly as if it were statically positioned.
OTOH, when you use absolute positioning, "parent" elements of the absolutely positioned element do matter.
This is because of what LaC's answer explains. With absolute positioning, the "top/right/bottom/left" values are relative to whatever is the nearest parent element to have absolute, relative or fixed positioning. I'll call this the "reference element."
Consider this example fragment:
<body>
<div style="width: 50%;">
<p style="position: absolute; width: 20px; top: 0; right: 0">P</p>
</div>
</body>
The div will be left-aligned, static (normal, in the document flow) position, 50% the width of the body. The p will be a 20px-wide box, in the top-right corner of the viewport:
-------------
| | |P|
| | --|
| div | |
| | |
| | |
-------------
The viewport is the reference element because there are no other parent elements of the p that have absolute/fixed/relative positioning.
Now change the div to be relatively positioned:
<body>
<div style="position: relative; width: 50%;">
<p style="position: absolute; width: 20px; top: 0; right: 0">P</p>
</div>
</body>
The div will appear exactly the same as before, because no top/right/bottom/left offset has been specified. However, the position of the p will change, even though its style hasn't.
That is because, before, the p was aligned to the top-right corner of the viewport, but now there is a closer parent element (the div) with absolute/fixed/relative positioning. So now, the div becomes the reference element and the p will be aligned to its top-right corner:
-------------
| |P| |
| --| |
| div | |
| | |
| | |
-------------
So, just know that whenever you use absolute positioning, you have to think about what the reference element in the document will be. And, you can design your stylesheet so that you choose whatever this reference element is, which makes absolute positioning a very useful layout technique.
129
Absolute positioning is relative to the nearest ancestor with absolute, relative or fixed positioning. Sometimes it's useful to give an element relative positioning just to establish a new references frame for positioning its children with absolute positioning.
6
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
