This question already has answers here:
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed 3 months ago.
Every doc I read about absolute position says:
"element is positioned relative to its closest positioned ancestor"
But when I use it with the sibling with position: relative that is before it, element with position absolute don't want to position itself relative to the ancestor, but it takes into account the position of the relative sibling in the document flow.
I can't understand why is that. Absolute should be absolute, not relative to the whatever sibling element...
Can somebody explain it to me ?
<div>
<div style="position:relative;">element1</div>
<div style="position:absolute;">element2</div>
</div>
Absolute positioned elements are moved from their static position - that is, the position they would have in normal flow if they weren't absolute positioned.
But you haven't moved it anywhere. You need to give it at least one of top, bottom, left, right, or their flow-relative equivalents inset-block-start, inset-block-end, inset-inline-start, inset-inline-end or their shorthands.
Related
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:
grandparent - absolute
parent - relative
child - absolute
Case 2:
grandparent - absolute
parent - relative
child - absolute
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:
I don't see any difference between the two cases above. Should the
case 2, parent div not start after grand parent? Why is it taking
(0,0)
If relative has a parent of absolute, will it behave accordingly to
the absolute parent or is not dependent on it.
Can we have a relative children with absolute as parent?
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.
Simply, there is no magic happening. Just understand how each position work. Here's shortest summary I can think of:
All elements by default have position: static , which means they will stack on each other (or inside each other if they're nested).
If an element has 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.
The CSS attributes 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.
Element with 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.
This question already has answers here:
Is position: static identical to position: relative, with no other properties specified?
(2 answers)
Closed 6 years ago.
I'm learning and studying the HTML/CSS codes of some of the most popular websites, and I just found that in most of them there is the "position:relative" property without the usual top, left, right, bottom properties.
Does this affect the page flow in some way, or it acts like the static property?
Short answer: position: relative becomes a positioned element:
This would mainly affect only it's child elements, with position: absolute relative to this element now, not the HTML. (Thanks Michael_B)
width: xx% is also relative to this parent element if there is not fixed widths along the hierarchy.
z-index now works with this element.
When you define absolute position for a element. The position it will base on the closest relative parent. If there's no relative parent, the position will base on the window page.
I was working on a site and have a parent element with position:relative that has child elements with position:absolute. What's strange to me is that with the positions I mentioned, the child elements seem to still recognize their parent and have scope within it.
heres a fiddle to demonstrate what happens.
This actually ended up working to my advantage, but I'd like understand what happens to cause this.
Absolutely positioned elements are placed in relation to the first positioned parent element. It is acting as it should.
if you look at the definition of position: absolute then it will make more sense.
absolute position: The element is positioned relative to its first positioned (not static) ancestor element
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
This link says
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such
element is found, the containing block is <html>
So absolute is in fact relative. So why not just use relative instead? Are there any practical use cases which can only be done by using absolute positioning but not relative?
So absolute is in fact relative.
NO, both are completely different, their rendering is completely different.
A relative positioned element is in the document flow whereas an absolute positioned element is out of the document flow.
Are there any practical use cases which can only be done by using absolute positioning but not relative?
Assume that you want a title on image hover, you need to position the title containing element absolute to the element holding image which has to be positioned relative. If you do not assign position: relative; to the element holding absolute positioned elements, your absolute positioned elements will just flow out in the wild.
Case
Case 2 (If element is not positioned relative, your absolute positioned elements will flow out in the wild)
So inshort, you can say that the absolute positioned elements DO NOT take any physical space on the document as they are out of the flow so inorder to save them flowing out in the wild, we use a container element positioned relative, where relative positioned do take space as they are in the flow so when you move your absolute positioned elements anywhere on the page, they won't affect any other elements position but if you move your position: relative; element anywhere on the page, yes it will affect other elements - static or relatively positioned around it.
An element with relative positioning remains within the flow of the document. Any additional positioning you provide will offset the element from this position.
An element with absolute positioning is removed from the flow of the document, and is positioned with respect to its first nonstatic parent element.
So let's say you have the following HTML structure, and an accompanying fiddle:
<div class="awesomeParent">
<ul>
<li>First Piggy</li>
<li>Second Piggy</li>
<li>Third Piggy</li>
<li>Fourth Piggy</li>
</ul>
</div>
Now checkout the same fiddle, modified a bit using relative and absolute positioning. See the difference?
In the second fiddle, using relative positioning, the space where the third list element should be is preserved. It's only being offset by the additional top: 40px; rule.
However, in the third fiddle, using absolute positioning, the space where the third list element should be is gone. In other words, that element is no longer in the normal flow of the document, and now the positioning rule top: 40px; is with respect to it's first nonstatic parent. In this case, this is the div .awesomeParent, which has a position: relative. If no parent had been found, then the element would have been positioned with respect to the html element. So in order to position an element absolutely within another element, you'll need to use position fixed, absolute or relative on the parent itself.
Images so you can compare the three:
as far as i know, absolute positioned element (.e.g.span style="position:absolute") will position based on its ancestor's position context, but this absolute positioned element WILL NOT create a new positioning system for its children, is that right?????
if #1 is correct, can someone tell me why parent is allowed to set to absolute position in this document? (just search exactly this line in quote will bring you to the relevant paragraph "Specify the parent container as position:relative or position:absolute."
http://phrogz.net/css/vertical-align/index.html
parent in that link must be 'relative' right, but not absolute, why does it say absolute is ok? because only relative creates new positioning context, so in that link bullet #3, the top 50% should not work
(1) is not correct. Elements with positioning defined will be positioned relative to the nearest ascestor that has its position set to anything other than static (the defautl).
from: http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning:
In the absolute positioning model, a box is explicitly offset with respect to its containing block. .... An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants
Note also: relatively and fixed positioned elements also establish new containing blocks for absolutely positioned elements.