I expect the element in the absolute positioned element to return 0, since if you where to append another element in that absolute positioned area and tell it to move 60px over from the left, it will be positioned at 120px, instead of 60px.
That is the problem I have. An absolute positioned element, positioned absolutely moves left and top based on the parent absolute positioned element. Whether this is a bug, it is quite annoying when doing dynamic positioning, but useful when doing manual positioning.
That is the problem I'm having. I need to display a tooltip type area underneath another element that is a child of an absolute positioned element. The problem, is that the tooltip is getting the total left value from the parent up to the HTML element. This is approximately 156px. However, I only need it give the value of 12px, where it will be in reference to the parent absolute positioned element. All sources say that the algorithm is correct, however does not take in account that an absolute positioned child element of an absolute positioned parent will move its positioned based on the absolute parent and not the HTML element.
I have tested this on both IE 7, IE 6, and Firefox. It is the case, but no library that I've seen takes this exception in account.
My problem is that I can fix the algorithm, if I can figure out if the parent is positioned absolutely. However, doing the following test in my first post returns an empty string, meaning that I can't tell what position the parent of the element is.
Better example:
Code: Select all
<div id="parent" style="position: absolute; top: 60px; left: 60px">
<div id="child1">This is some text.</div>
<div id="child2" style="position: absolute; top: 20px; left: 10px;">This should appear below child1 depending on the height of child1</div>
</div>
Child2 ID will be positioned 80px from the left, and 60px from the top, not 20px from the top in reference to HTML element like you both imply.
This code does not work for me:
Code: Select all
var parentPosition = getElementById('parent').style.position;
alert (parentPosition);
if( parentPosition == 'absolute')
return true;
Alerting the parentPosition, will return "" and I need to figure out how to get the position of the parent element.