| <!DOCTYPE html> | |
| <!-- | |
| | Blockification should not affect the outer display style used for the static position. | |
| | https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width | |
| | https://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo | |
| --> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| margin: 0px; | |
| font-family: Roboto; | |
| font-size: 30px; | |
| font-weight: bold; | |
| } | |
| .block { | |
| display: block; | |
| } | |
| .inline { | |
| display: inline; | |
| } | |
| .inline-block { | |
| background-color: #0091ea; | |
| display: inline-block; | |
| } | |
| .absolute { | |
| position: absolute; | |
| } | |
| .fixed { | |
| position: fixed; | |
| } | |
| .lightblue { | |
| background-color: #40c4ff; | |
| } | |
| .cobaltblue { | |
| background-color: #00b0ff; | |
| } | |
| .darkblue { | |
| background-color: #0091ea; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <span class="lightblue"> | |
| inline | |
| <span class="absolute darkblue">absolute</span> | |
| </span> | |
| </div> | |
| <div> | |
| <span class="lightblue"> | |
| inline | |
| <div class="inline absolute darkblue">absolute</span> | |
| </span> | |
| </div> | |
| <div> | |
| <span class="lightblue"> | |
| inline | |
| <div class="inline-block absolute darkblue">absolute</span> | |
| </span> | |
| </div> | |
| <div> | |
| <span class="lightblue"> | |
| inline | |
| <span class="fixed darkblue">fixed</span> | |
| </span> | |
| </div> | |
| <div> | |
| <span class="lightblue"> | |
| inline | |
| <div class="inline fixed darkblue">fixed</span> | |
| </span> | |
| </div> | |
| <div> | |
| <span class="lightblue"> | |
| inline | |
| <div class="inline-block fixed darkblue">fixed</span> | |
| </span> | |
| </div> | |
| </body> | |
| </html> | |