Positioning in CSS

by

If you don’t specify an element’s positioning type, it defaults to <span class="keyword" style="box-sizing:border-box;">static</span>. This just means “where the element would normally go.” If you don’t tell an element how to position itself, it just plunks itself down in the document.

Absolute positioning
The first type of positioning is absolute positioning. When an element is set to position: absolute, it’s then positioned in relation to the first parent element it has that doesn’t have position: <span class="keyword" style="box-sizing:border-box;">static</span>. If there’s no such element, the element with position: absolute gets positioned relative to <span class="tag" style="box-sizing:border-box;"><<span class="title" style="box-sizing:border-box;">html</span>></span>.

Relative positioning

Relative positioning is more straightforward: it tells the element to move relative to where it would have landed if it just had the default <span class="keyword" style="box-sizing:border-box;">static </span>positioning.
If you give an element relative positioning and tell it to have a margin-top of 10px, it doesn’t move down ten pixels from any particular thing—it moves down ten pixels from where it otherwise would have been.
Fixed positioning
fixed positioning anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past.
Happy Reading!

Leave a Comment