What are absolute element relative to?

HTML & CSS
1

hey folks, i been playing around with positioning, and i am a bit confused. when i give a div position of absolute, with coordinate. i see it isn’t relative to its parent element (relative div), instead its absolute to viewpoint. (top of the the viewable screen/ of document), can someone clarify what is absolute element relative to.

2

Thats ABSOLUTELY TRUE.
sorry I could not resist.

Anyway, Think of it this way, BY DEFAULT the BODY ELEMENT will act as your first RELATIVE positioned element. Thus if give AP to any child of the BODY w/o giving the parent or that element RP( or maybe the parent of that element IS the body) it will seem appear positioned to the view port.

BUT LETS SAY you had another ELEMENTin between the parent element ( in your example, the BODY) and the ELEMENT you have AP’ed; it will still appear positioned relative to the body. THIS IS UNLESS you give that ELMENT position:relative or position:absolute.

BTW, if you actually wanted positioned relative to the viewport, regardless of the scroll and content of its parents for example you can use position:fixed.

Also handy to know is that by default all children of the body element have position:static.

this demo might help you :
http://www.barelyfitz.com/screencast/html-training/css/positioning/

3

I have a live example at http://www.felgall.com/cshow09.htm along with a description of how it works.

4

a live example or a link would be nice :slight_smile:

But genrally they are absolute to the container they are in. If it is dimensions then they cant exceed that container’s dimensions.

But in positioning, which is see absolute being used for, it means it is absolute to the viewport of the browser.
So what ever has that styling will get out of view if that part of the browser viewport is not in view.
So in other words in disappears as the user scrolls down or away from it

5

An absolute element is absolute with respect to its first ancestor that has either position absolute or position relative :slight_smile:

6

if its absolute to relative element then. when i say top:0px it starts with top of the screen. not top from the relative element.?

7

Could you post your html and css (or a link to a live example)?