Menu
I am quite confused with this relative and absolute positioning when the parent or grand parent has a position values. can someone clear me out these two cases:
Case 1:
Case 2:
but here parent is independent of grandparent, like below:
<div class="grand-parent">
</div>
<div class="parent">
<div class="child">
</div>
</div>
Below is a fiddle which i have worked on: https://jsfiddle.net/4KUWc/32/
Questions:
980
position:absolute...elements have their relational positioning attributes (i.e. top, bottom, right,...) calculated from their closest ancestor with a position value other than static (which is default). If no such ancestor exists, <body> will be used.
position:fixed...elements have their relational positioning attributes calculated from their closest viewport (by default: <body>, but a 3d transformed element acts as viewport for its children - see Unfixing fixed elements with transforms).
Both of the above place the element, including all its children, out of the content flow of their parent. All subsequent elements in DOM will act like this element and its children do not exist in DOM.
position:relative...elements have their relational positioning attributes calculated from the position they would normally occupy in their parents content flow if no relational positioning attribute was applied. Unlike fixed and absolute, relative position does not place the element out of its parent contents flow.
108
Simply, there is no magic happening. Just understand how each position work. Here's shortest summary I can think of:
position: static , which means they will stack on each other (or inside each other if they're nested).display: none or has width: 0px and height: 0px then it will not take space, so other elements will just be rendered as the hidden element never existed.top + bottom + right + left + z-index are ignored if the element position is static (the default). To work correctly, the element must be positioned relative, absolute, or fixed.static and relative are alike, except that relative may consider the attributes top + bottom + right + left + z-index.relative is positioned relative to its parent position.absolute or fixed are alike, with one difference: absolute will be positioned relatively to the body, while fixed will be positioned relatively the window (note @AndreiGheorghiu's answer about fixed position and 3D transform).absolute element will be relative to the nearest parent with position other than static. If all its parents are static, it will be relative to the body.
34
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
