Question

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.

Answer 1

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/