| <!DOCTYPE html> | |
| <!-- | |
| | The static-position containing block is the containing block of | |
| | a hypothetical box that would have been the first box of the element if its | |
| | specified "position" value had been "static". | |
| | https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width | |
| | | |
| | That said, the computation of a static position should not split inline | |
| | boxes. | |
| --> | |
| <!-- TODO: Line box should try harder when estimating static position of an | |
| absolutely positioned box. --> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| font-family: Roboto; | |
| font-size: 50px; | |
| font-weight: bold; | |
| } | |
| .container { | |
| margin-bottom: 75px; | |
| } | |
| .narrow { | |
| width: 200px; | |
| } | |
| .absolutely-positioned { | |
| background-color: #2196f3; | |
| height: 50px; | |
| position: absolute; | |
| width: 50px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| Hello, | |
| <div class="absolutely-positioned"></div> | |
| world! | |
| </div> | |
| <div class="narrow container"> | |
| Hello, | |
| <div class="absolutely-positioned"></div> | |
| world! | |
| </div> | |
| </body> | |
| </html> |