Last active
January 31, 2023 05:53
-
-
Save amekusa/d79530cacc874ad27b0c5278bba66c84 to your computer and use it in GitHub Desktop.
oddities of `position` property
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <style> | |
| body { | |
| background: yellow; | |
| } | |
| div { | |
| min-height: 100px; | |
| color: white; | |
| } | |
| .x { | |
| position: relative; | |
| width: 400px; | |
| background: blue; | |
| } | |
| .y { | |
| position: static; | |
| width: 50%; | |
| background: green; | |
| } | |
| .z { | |
| position: absolute; | |
| right: 0; | |
| width: 50%; | |
| background: red; | |
| } | |
| </style> | |
| BODY | |
| <div class="x"> | |
| X (relative) | |
| <div class="y"> | |
| Y (static) | |
| <div class="z"> | |
| Z (absolute) | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
CSS Positioning Rules
If
positionisabsolutetop/right/bottom/leftandwidth/height: <percentage>are relative to the closest ancestor of whichpositionis notstatic.Thus, in the above example, the box
.zgets 50% width of the box.x, not.y. And also its aligned with the right edge of.xdue toright: 0.If
positionisfixedtop/right/bottom/leftandwidth/height: <percentage>are relative to the viewport.If
positionis notabsoluteorfixedwidth/height: <percentage>is relative to the direct parent no matter what the parent'spositionis.