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
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.
Often I find myself attaching a class to an element just to give it position: relative; so that I can position it's children using position: absolute;
Would there by anything wrong, or should I say, would anything break if I was to write:
* {
position: relative;
}
or perhaps the below example, as these are usually the only elements I require the relative positioning on:
div, navbar, footer, section, aside, header, article {
position: relative;
}
According to W3schools, all elements are position: static; by default which is positioned according to the normal flow of the page.
"HTML elements are positioned static by default. A static positioned
element is always positioned according to the normal flow of the
page."
and according to the same source, relatively positioned elements also position according to the normal flow of the page unless overridden with CSS:
"The content of relatively positioned elements can be moved and overlap
other elements, but the reserved space for the element is still
preserved in the normal flow."
Yes, it is. If you try to position one element absolute it is positioned relatively to the closest ancestor, which has a CSS position other than static.
If every element has position:relative, this would be the direct parent.
But you might want to position the absolute element relatively to an element further up in the DOM tree or maybe absolutely on the page body.
At some point you will have the situation where you are not in full control of the HTML. Then you will see, that it is counterproductive to set everything relative.
An example might be a phat layer menu. You have the layer inside a .menu class somewhere deep in the jungle of hierarchical ul li elements. This should be positioned relative to the .menu element's position. You might not want to change the DOM tree here.
If you apply position: relative to all elements in the page, you won't be able to use position: absolute efficiently, because you can't position an element to the grandparent and you will probably break in a unpredictable way external plugins/modules that rely on position: absolute.
You may encounter problems with z-index (for example in dropdowns menu), and you'll end up overwriting this behaviour with position: static and position: absolute.
As for me using position:relative is not good - because sometimes you need to position elemet relatively browser window and it will give a problem to you. But if you are sure that you wont doing this Go ahead
The first thing that jumps to mind and one that we saw in one of our sites recently was that any absolutely positioned elements within those relatively positioned elements will have their position offset from that element.
As an example that would be a problem if you were trying to position to the centre of the body.
Setting position:relative to all elements is a bad idea. This can affect solutions built around z-index. As per html design positioned elements will display on top of unpositioned elements. If you set position for all elements some time unexpected elements participate in z-index calculation.
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.
I have a container div, and it needs to be positioned as relative. Inside that div, I have a table. I want to display an element inside one of the table cells as absolute, relative to the containing cell, but it gets positioned relative to the container div (I think).
See this jsFiddle.
How can I set this up so that the element gets positioned relative to the td?
Make the TD position:relative as well. Absolute elements are always positioned relative to their nearest relative parent.
Since tables and table related elements can be the odd ducks of the HTML element world due to their unique behavior, it may be more reliable to simply add an inner wrapper DIV around all the contents of the TD, and make that DIV relative instead.
You can only position the div relative to it's TD parent if it's TD parent is also positioned (absolute or relative). In this case, since dealing with TDs, you want to just set it to position: relative.
See answer in this jsfiddle.
It will work if you make the td position: relative. See here: http://jsfiddle.net/u6WHH/6/
make the container and the cell relative then assign absolute to td.
JSFiddle
How can I get the 'Tree' to be positioned at the top inside the second row?
I have read some sources on this, some claiming that fixed is positioned relative to its outer container, other relative to the browser window. On position:absolute, I've read that it's relative to the browser window, but w3schools claim that it's relative to the first positioned element. All of this is making my head a little fuzzy, and despite playing around with both properties I have not been able to really get my head around this.
position:fixed always refer to the browser window. A fixed positioned element won't change it's position when scrolling the browser window.
If you want a relatively positioned element inside another element, you must give the container (parent) element a position:relative;, and the element inside it a position:absolute;. This way the absolutely positioned element coordinates will be based on the parent (relatively positioned) element.
Also, when trying to use absolute and relative positioning for a layout, it's better not to use tables.
Update
The absolute positioned element will search through the DOM tree, looking for the nearest ancestor that is positioned as well. If it finds none, it will position itself relative to the browser window. – Justus Romijn
Update 2
just give position:relative; to the td containing the absolute positioned element, like this
http://jsfiddle.net/E2gYN/5/