Why doesn't position:absolute always mean absolute to the document? When you have a divB, for example, inside a another divA. If divA had no position, would divB's absolute be absolute to the document?
If you create a position element and you put another element inside of it that has position, is that child always relative (for lack of a better word) to the parent/containing element? In other words, if I have a container that is position:relative, but a child that is position:absolute, that absolute is only absolute to the parent, right? Thanks.
An element with position: absolute is absolute to it's nearest non-static parent container. For example, I have a position: relative div, inside that a normal paragraph, and inside that an absolute span. That span is absolute, not to the paragraph (which has no defined position, so is default to static) but to the div which is relative.
For relativeness to the whole document, you used position: fixed. The reason (in your example) that divB would seem absolute to the document, is because it doesn't find any parents with position:relative, and eventually ends up using the body.
Absolute is not necessarily absolute relative to its parent, rather its nearest ancestor that is positioned. So if the parent of an absolutely positioned element doesn't have a declared position, then dependency will fall until the ancestor (parent of parent of parent... etc) is positioned.
http://www.w3schools.com/cssref/pr_class_position.asp
(Note the Property Values section toward the bottom)
Related
When an absolute v-overlay is used inside a v-col, the overlay covers all of its grandparent v-row instead of just its parent v-col.
"absolute overlays are positioned absolutely and contained inside of their parent element."
-Vuetify's documentation
Here's a demo on codepen
This happens because elements are by default have a position value of static, and in CSS there's this rule:
absolutely positioned elements are positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static).
Source: mdn
In our case the nearest positioned ancestor is the v-row.
To fix this, one has simply to add a position: relative; to the parent v-col (you can uncomment this in the codepen to see the difference)
I am told that an absolute value will position an element in relation to the nearest non-static element.
But can't a relative element position itself in relation to another relative element?
I have to pick 1 answer to the main question, and the options are relative, absolute, static, fixed.
But I see that there are two answers to this question or am I wrong?
Only "Absolute" value position element in relation to parent non-static element.
An element with position "relative" is positioned relative to its normal(default static) position.
An element with position "fixed" is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
An element with position "absolute" is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
The definition of 'absolute' positioning is: "The element is positioned relative to its first positioned (not static) ancestor element".
My question is how does the element behave when all ancestors are 'static'?
Can we say that in this case, 'absolute' positioning behave as 'fixed' positioning?
Can we say that in this case, 'absolute' positioning behave as 'fixed' positioning?
No, not entirely. The behavior is the same with respect to the top, right, bottom and left offsets, but not with respect to scrolling, which is what distinguishes fixed positioning from regular absolute positioning.
When there are no positioned ancestors, the containing block of elements with position: absolute is the initial containing block.
The containing block of elements with position: fixed is the viewport, not the initial containing block. The viewport does not move when scrolling, but the initial containing block does (because it can be larger than the viewport), which is why fixed-positioned elements do not scroll with the page, but elements with position: absolute do, even when the latter have no positioned ancestors.
You can manipulate the page layout such that the content scrolls but the initial containing block never does, resulting in a hack that makes position: absolute with no positioned ancestors behave like position: fixed, even in Internet Explorer 6.
I have div which hosts another div. Ok, I get the case when the parent is position:relative and
the child is position:absolute. I don't get what happens when
parent's position is absolute and child's position is relative
parent's position is absolute and child's position is absolute
parent's position is relative and child's position is relative
I use the JSbin example from Why does an absolute position element wrap based on its parent's right bound? but the question applies to positioning concept in general
Read more about absolute, relative, and fixed position and how they differ here, but I'll try to answer your question about relationships specifically.
position: absolute will position that element to its nearest parent with a position other than static. Static is the default for everything.
position: relative is a little weird because it really affects that element's children, not its own position. It's just saying to its child elements, "position yourself relative to me if you have position: absolute." A position of fixed or absolute does the same thing (meaning its positioned children will position themselves relative to its boundaries), but these styles also affect their own position on the page. An element with position: relative won't look any different, but its children might.
So consider a situation like this:
<div class="parent">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
If grandchild has position: absolute, it will position itself relative to the browser window because there is no parent with a position other than the default of static.
If parent also has position of relative, absolute, or fixed, grandchild will position itself relative to the boundaries of parent.
However, if child also has a position of relative, absolute, or fixed, the grandchild will position itself relative to child's boundaries, because it is the nearest parent with a position other than static.
In summary, relative affects an element's children, while absolute and fixed affect the element itself as well as its children.
And remember that position: fixed bypasses all relative and absolute parents and always positions itself relative to the browser window.
If the mommy is relative and the child is absolute : the mommy listens to her child. as if to protect him. sort of..
If they are both absolute : they have nothing to do with each other. they are strangers to each other.
If the parent is absolute and child relative : they are bound. the child moves ( width and height ) towards or away from his mommy.
It will always be a little strange, there are a lot of great texts about this, but also for me it is always just switching absolute and relative until it works. hope this clears it up a little.
This question goes to the css wizards. I've googled this and couldn't find an answer.
At this point I'm not sure it's possible:
How do I specify the position of an element within another element, semi-absolutely so to speak?
I want to say "Put element inner x pixels to the right of outer's left border, no matter where outer happens to be at the moment."
This might be possible with javascript, but shouldn't it be possible with css?
#inner {
position: absolute;
left: 10px;
}
What this CSS actually does is position the #inner element 10px from the left border of its 'closest' parent that is has a position value of absolute, relative, or fixed. If no such element is found, it is absolute positioned relative to the body element, but if you make sure that the inner element has a parent that has its position defined with CSS, it will be positioned absolutely within that parent.
Take a look at this JSFiddle. First, look at the html and CSS to see how it was constructed, then go ahead and use your mouse to drag either of the element around (that's what the javascript in their does, its purely for demonstration purposes). Notice how when you drag the outer element, the inner one moves with it? All you are doing when you drag the elements around is changing the values of their top and left properties, and since its parent is absolute positioned, the child element will stay at the same spot within it no matter where you move it on the screen. :D
Absolutely, it's easy! All you have to do is specify the parent to have a position (either relative or absolute) and then the absolutely positioned child will be positioned "relative" to the closest positioned parent.
Confused?