| <!DOCTYPE html> |
| <!-- |
| | Absolutely positioned elements have their containing blocks set to their |
| | first ancestor with a position of 'absolute', 'relative' or 'fixed'. They |
| | should inherit CSS properties from their parent, as usual, even though their |
| | percentage-based used values are calculated based on their containing block. |
| --> |
| <html> |
| <head> |
| <style> |
| .outer-absolute-block { |
| position: absolute; |
| font-size: 30px; |
| font-weight: bold; |
| color: rgb(0, 0, 255); |
| } |
| .static-block { |
| position: static; |
| width: 400px; |
| height: 400px; |
| color: rgb(255, 0, 0); |
| } |
| .inner-absolute-block { |
| position: absolute; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div class="outer-absolute-block"> |
| <div class="static-block"> |
| <div class="inner-absolute-block"> |
| This text should be red. |
| </div> |
| </div> |
| </div> |
| </body> |
| |
| </html> |