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/
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.
If the child is position:absolute, the parent is overflow:hidden, and the parent is position:static, the child still overflows:
<div style="overflow:hidden;height:100px;border:2px solid red;">
<div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5">
</div>
</div>
If the parent has a position other than static, the child no longer overflows:
<div style="overflow:hidden;height:100px;border:2px solid red;position:relative;">
<div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5">
</div>
</div>
Why does this occur? What is this behavior called?
I'm using Chrome, is this behavior consistent across browsers?
That's because the spec defines overflow as
This property specifies whether content of a block container element
is clipped when it overflows the element's box. It affects the
clipping of all of the element's content except any descendant
elements (and their respective content and descendants) whose
containing block is the viewport or an ancestor of the element.
The absolutely positioned element is a descendant whose containing block is established by an ancestor of the element with overflow: hidden, as explained in Definition of "containing block"
If the element has position: absolute, the containing block is
established by the nearest ancestor with a position of absolute,
relative or fixed
Therefore the absolutely positioned element is not affected by that overflow: hidden.
If the parent were positioned, it would be the containing block of the absolutely positioned element, and then overflow: hidden would affect it.
First of all, take a close look at the MDN Documentation CSS Position.
So how does this relate to your question? let's first analyze position: absolute:
absolute:
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
As far as your case goes, the positioned ancestor div element does not have any specified position attribute to it.
Therefore, it assumes the default position: static which literally specifies nothing other than the standard position of the element in the page. Check it out:
static:
This keyword lets the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, left and z-index properties do not apply.
In other words, the child will not be positioned relative to its parent. The weird behavior is because you expect the parent div to be positioned when is not positioned at all. It falls to ask: what is the nearest positioned parent then? The answer is to go up on the DOM tree and find it, logically since you have nothing in your example but your two div, the nearest parent will be webpage document itself.
So, how can you fix this? By adding (for example) position: relative to the parent div element.
EDIT: Overflow and Position properties:
By using overflow, you are typically trying to do one (or all) of the following: clip content, render a scroll bar, display any overflown content in a particular way. I gather your goal however is to have the child div not overflow the parent div. The question of how to avoid this overflow can take you to a place you do not want to go.
So by narrowing down what overflow is all about: (long story short) it is about controlling/modifying the look and feel of the content of what is inside a particular HTML element. Keep in mind, the content, not the element itself.
In your case, you may perceive the child element of your parent div as being the content of the parent div. Rather, what you actually see is the contents of the child element. The positioning of the parent and child with respect to each other is thus not controlled by the overflow property, but by the position property.
Is this consistent across browsers?:
Since CSS 2.1, the overflow (visible | hidden | scroll | auto) and position (static | relative | absolute) have been supported in all major browsers. Any discrepancies would occur when you extend on the overflow since certain of its attributes are not widely supported. See here for reference: Can I Use: Overflow (also scroll to the bottom for the CSS 2.1 reference).
Do you have any questions about this? Ask in the comments below.
overflow property is not inherited anyhow: http://www.w3schools.com/cssref/pr_pos_overflow.asp
So in your first case it is understandable it is not working, since with static position the browsers put it in the order it reads and overlooks collisions.
In your second case absolute positioning actually sets a space for the container div and then puts the second div into it - thus makes the overflow hidden.
You can imagine it this way: in your first case you created two divs which are not related to each other but positioned on each other in the second case you created a container and forced another div into it by setting the container's overflow to hidden.
Hope it helped easy understanding,
Andrew
The relative value for the position property is very similar to that of the static value. The primary difference is that the relative value accepts the box offset properties top, right, bottom, and left. These box offset properties allow the element to be precisely positioned, shifting the element from its default position in any direction
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
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.
What is the difference between relative and absolute tags of div element ?
Absolute positioning positions an element relitive to the first parent that has a position oher than static, and removes the element from the document flow. Relative positioning allows you to move an element from its "normal" positon, leaving the space where it was originally in the content.
Relative is generally for small adjusents in page layout, absolute is for exact positioning.
If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. The div stays within the flow of the document, but just moves relative to the position that it is specified at within the document.
When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. It's not relative to the place you where the div actually occurs in the document.