Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS nested Div with position absolute?

Tags:

html

css

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?

like image 885
Patrick Desjardins Avatar asked Dec 13 '22 23:12

Patrick Desjardins


1 Answers

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.

like image 175
Pekka Avatar answered Dec 28 '22 18:12

Pekka