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.
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)
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)
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?
Are offset properties (left, top, bottom, right) only for non-static positions?
Can they be applied to a statically positioned element? If so, what are the differences from
applying them to non-statically positioned elements?
to offset an element it's position has to be position:relative
the co-ordinates, top, right, bottom and left serve different purposes depending on if the element is relatively or absolutely positioned.
When is an element offset as opposed to moved?
when you actually offset using position: relative; the element is not removed from the flow, and indeed the space that the element would have taken up if it had remained static (the default) is still reserved for it, therefore you have just offset it from it's original position. Any element following it will appear where it would have done even if you hadn't offset it's predecessor - like this example
Moving, not offsetting
If however you actually want to move an element, then it needs to be removed from the flow, so there is no space reserved for it, and then that's when you use position:absolute; or fixed.. that is the difference
Summary
static is the default, and you just use margins to move it around, it will ignore co-ordinates and z-index
relative is reserved space, co-ordinates will offset it from it's original space
absolute will remove the element from the flow and the co-ordinates will be calculated according to it's containing block, which is the nearest relatively positioned ancestor (or the body element if no relatively positioned ancestors exist)
fixed does not have a containing block, i.e. you can't specify which element it should be positioned in relation to, it will just fix itself in relation to the viewport
and finally an element will not accept a z-index if it's position is the default of static, so position: relative; without any co-ordinates applied is similar to static, but it is useful for z-indexing and being a containing block for absolutely positioned elements
It makes little sense to apply them to position: static elements, as they are static.
To shift a static element over by a certain amount, you can change it's position property to position: relative;.
Now, you can shift it around with top, left, etc.
There exist a few more types of position, namely position: fixed and position: absolute.
fixed makes the element fixed to the screen and it's unaffected by scrolling, so it's as if it's stuck to the computer monitor. Setting its top, etc. sets the position.
absolute makes the element positioned relative to the document and ignore all layout rules. Setting it's position sets where it is positioned on the document.
They can be applied to absolute and fixed position elements, which are essentially the same but fixed always uses the document window as its anchor. You can also apply them to relatively positioned elements in which case they are an offset from what is best described as the default inline positioning.
what is the containing block of an absolutely positioned element? it seems the rule can be a bit complicated...
the spec should be here:
http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
i want to verify if the following is true:
for simplicity, assume the containing block is a block element (not inline element)...
1) if the absolute positioned element has a closest ancestor that is positioned "non static" (relative, fixed, or absolute), then that ancestor is the containing block. the absolute positioned element is relative to it.
2) if there is no such ancestor, then the viewport is the containing block, and so the absolute positioned element is relative to the viewport.
no matter what the containing block is above, the width:100% or n% and height:100% or n% are both relative to the containing block.
that's why a
<div style="position:absolute;width:100%;height:100%;background:green"></div>
right under <body> will cover up the whole viewport exactly -- no more, no less.
we could also use position: fixed, except IE 6 doesn't support it... and so the poor programmer need to use position: absolute instead... (well, not a big deal)
Is that an accurate description of an absolute positioned element? If so, i think IE 6 and above, FF, Safari, Chrome all follow this behavior accurately?
You are correct. The containing block is the last positioned element. so if you want to explicitly set the container then give it position:relative. Most browsers get this right. CSS doesn't really have a 'viewport', I think the top is the HTML element though don't hold me to that. IE prior to 7 had an unnamed element above HTML though.
Summary:
position: relative
Does nothing except set the positioning context for all the elements contained within it. You can then position: absolute any element it contains by setting (typically one or two) values from the possible top, right, bottom or left.
If you give an element with position: relative a top, right, bottom or left value, it will shift position accordingly but leave a blank space where it would be by default. In other words, it remains within the document flow but offset.
position: absolute
To position something absolutely, you need to ask 'absolutely, but relative to which containing element'? It will either be the entire body (the default) or some other element on the page that is already positioned (usually with relative or absolute - fixed is also useful and supported in IE 7 but see this bug). It is then taken out of the document flow - other elements might appear beneath it, but won't flow around it. If it appears behind another element, you need to set the z-index property to move it in front.
A common solution is to have a centred container (margin: 0 auto) with position: relative within which other items are placed with position: absolute.
Finally, I like this little interactive CSS positioning demo.