Geek Answers Handbook

CSS nested div with absolute position?

Here is a reproduction of a more complicated 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>

I want to have a div with the text CORNER on 0,0 pages. I KNOW I can just change the DIV in html to be outside the first DIV with an absolute DIV, but I cannot do this, because in the real case I am limited to ContentPlaceHolder (ASP.NET). So, is it possible to have a DIV that is nested inside another DIV with an absolute position and have an absolute absolute page coordinate?

+3
html css
source share
4 answers

So, is it possible to have a DIV that is nested inside another DIV with an absolute position and have an absolute coordinate for the page?

Not absolute for 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 this way β€” but the coordinates will always be relative to the container, never on the page.

Edit: There is a position:fixed that breaks out of the container (try changing it in your example, left: 0px top: 0px will put it in the upper left corner of the page the way you want it to) but it has an obvious side effect that is fixed in the window viewer, and not in the document, therefore it is useful only if scrolling does not occur in the body.

+10
source share

This may not be the universal solution you need, but you can change the absolute positioning of the external <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 this, the internal <div> will position itself absolutely inside the <body> - its closest ancestor with non-static positioning.

+1
source share

Coordinates for positioning abs use the nearest located parent cell of the positioned item. Thus, assuming that your div creating the corner (s) does not have parent elements located in rel or abs, it will by default add a chain to the html element, which is equal to 0.0 from the viewport. The only problem here is that it can be difficult to accomplish depending on your layout. Therefore, although it is theoretically possible, it can be impractical. It is better to use a position relative to the direct parent, and then a position with negative values.

0
source share

If you are limited in ContentHolder, could you do this? (I use javascript comments in HTML ... It's just simpler 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: Well, I just realized that this would not work if there was content after the place holder. I will leave it as a tiny chance that it will allow (perhaps a very small chance).

0
source share

More articles:


All Articles