The silver div position is now absolute.
When the silver-bordered div is absolutely positioned, it should be at least as wide as the red-bordered div. (Its width depends on how exactly the user agent implements the "initial containing block": the "initial containing block" should be at least as large as, as wide as the document root element.
References:
With no positioning, the containing blocks (C.B.) in the following document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Illustration of containing blocks</TITLE> </HEAD> <BODY id="body"> <DIV id="div1"> <P id="p1">This is text in the first paragraph...</P> <P id="p2">This is text <EM id="em1"> in the <STRONG id="strong1">second</STRONG> paragraph.</EM></P> </DIV> </BODY> </HTML>
are established as follows:
For box generated by C.B. is established by html initial C.B. (UA-dependent) body html div1 body p1 div1 p2 div1 em1 p2 strong1 p2 If we position "div1":
#div1 { position: absolute; left: 50px; top: 50px }its containing block is no longer "body"; it becomes the initial containing block (since there are no other positioned ancestor boxes).