ansaurus

Question

Answer 1

+2 A:

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.

Pekka 2010-02-16 17:09:49

Alright, that what I though, just want to be really sure.

Daok 2010-02-16 17:10:55

@Daok see my edit.

Pekka 2010-02-16 17:11:50

Actually thats not true. You can... see my answer for details.

prodigitalson 2010-02-16 17:12:54

@prodigitalson waiting for your answer!

Pekka 2010-02-16 17:14:19

Nice one Pekka, I need to check if I can use this position. In the real case, we are using a Third-Party library for drag-and-drop and I am not sure I can tell the component to change its position mode. I'll take a look and come back.

Daok 2010-02-16 17:31:03

Answer 2

A:

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.

prodigitalson 2010-02-16 17:15:46

@prodigitalson well, that's what I'm saying, isn't it? If you're inside an abs or rel positioned box, a child element can't "break out" and position itself relative to the grandparent. I'm disappointed man, I was waiting for a magnificent trick :)

Pekka 2010-02-16 17:18:59

oops yeah thats my bad... I didnt notice he had abs on the parent. Shame on me :-)

prodigitalson 2010-02-16 17:19:49

Leaving this here for reference sake :-)

prodigitalson 2010-02-16 17:28:19

Answer 3

A:

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)

Bob 2010-02-16 17:18:10

Answer 4

+1 A:

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"&gt;
<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.

LeguRi 2010-02-16 17:22:38

ansaurus

tags:

views:

answers:

CSS nested Div with position absolute?

related questions