This layout outlines how elements interact when distinct CSS position rules are explicitly declared inside your site stylesheet header structure.
This is the default setting for every element. It follows the natural vertical flow of the page, stacking right into place according to where it sits inside the code. Offset properties like top, bottom, or right do not affect it.
This box is moved relative to where it normally belongs. By declaring top: 15px; and left: 25px;, it shifts down and right from its native starting point, while the blank space it left behind remains preserved.
The parent box surrounding this area uses position: relative;, creating an anchor system boundary line.
This red box is pulled out of normal document layout flow. It targets its relative container and mounts exactly 20px from the bottom and right lines.
Look in the bottom-left corner! This purple box is pinned directly to the browser viewport. If you scroll up or down on your screen, it remains completely locked in place.