CSS nested Div with position absolute?_问答_开发者

开发者 https://www.devze.com 2022-12-20 13:51 出处：网络

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\">

相关专题：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:absolu开发者_开发百科te;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.

Maybe this isn't the generalized solution you need, but you can change the absolute positioning of the outer <div> to margin:

<!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="margin-left:500px;margin-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>

When you do that the inner <div> will position itself absolutely within the <body> - its nearest ancestor with non-static positioning.

Coordinates for abs positioning use the closest positioned parent box of the positioned element. So assuming that your div creating the corner(s) has no parent elements that are rel or abs positioned it will default up the chain to the html element which is at 0,0 of the viewport. The only problem here is this may be hard to accomplish depending on your layout. So while theoretically its possible it might not be practical. Its better to use position relative on the direct parent and then position with negative values.

If you're limited to a ContentHolder couldn't you do this? (I'm using JavaScript comments in HTML...It's just easier even though it won't work :P)

<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
    </div> //close the content div
    <div style="position:absolute;left:0;top:0;width:10px;background-color:green;";>
        CORNER
    </div>
</asp:Content>

Edit: Ok, I just realized this wouldn't work if there's content after the place holder. I'll leave it as there's a tiny chance it resolve things (probably very tiny chance)