Here is a reproduction of a far more complex case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<div style="position:absolute;left:500px;top:200px;width:200px;background-color:red;";>
AS HDSKLAJD KLASJD KLASJ DKLASJDKL JASKLD JKLAS JDKLASD AS HDSLAJD
<p>
sadas dasd sad asd sadas dasd sad asdsadas dasd sad asdsadas dasd sad asd
</p>
<div style="position:absolute;left:0;top:0;width:10px;background-color:green;";>
CORNER
</div>
</div>
</body>
</html>
What I want is to have the div with the CORNER text at the 0,0 of the page. I KNOW I can simply change the DIV in the html to be outside the first DIV with absolute but I cannot do it since in the real case I am limited to a ContentPlaceHolder (ASP.NET). So, is it possible to have a DIV that is nested inside an other DIV with position absolute and to have its coordinate absolute to the page?
So, is it possible to have a DIV that is nested inside an other DIV with position absolute and to have its coordinate absolute to the page?
Not absolute to the page, no. You can use negative left
and top
values to move the DIV outside the container - if the left
and top
coordinates of the container are fixed, you can achieve the effect that way - but the coordinates will always be relative to the container, never to the page.
Edit: There's position:fixed
that does break out of the container (try changing it in your example, left: 0px top: 0px
will place it in the top left corner of the page as you want it) but it has the obvious side-effect of being fixed on the viewport, not in the document - so it's useful only if no scrolling occurs in the body.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With