CSS Positioning

As an entraprenuer and web developer getting my ideas to come to life online has never been more important than it is today. With this I set out to create stunning graphic designs on webpages that would blow people away. Of course this was much easier said than done. If you’re anything like me and want to have everything mobile responsive to give the same look and feel across all viewports then CSS positioning is crucial. While it may seem complex at first, understanding the basics of CSS positioning can give you greater control over how your website looks and functions.

<div class="static">This is a static positioned element.</div>

.static {
    position: static;
}

In most cases, you don’t need to specify position: static; because it’s the default behavior.

<div class="relative">This is a relatively positioned element.</div>

.relative {
    position: relative;
    top: 10px;
    left: 20px;
}

Relative positioning allows you to move an element relative to its original position. The space the element would have occupied in the document flow is still preserved. In this example above, the element is moved 10 pixels down and 20 pixels to the right from its original position.

<div class="container">
    <div class="absolute">This is an absolutely positioned element.</div>
</div>

.container {
    position: relative;
    height: 200px;
}
.absolute {
    position: absolute;
    top: 50px;
    left: 50px;
}

Absolute positioning removes the element from the normal document flow and positions it relative to its nearest positioned ancestor (an ancestor with position set to relative, absolute, or fixed). If there is no such ancestor, it will be positioned relative to the initial containing block (usually the <html> element). Now for me as a beginner this made absolutely no sense for some time until I started playing around with it. For ease of use first you must declare the part element as position: relative;. From here you’re then able to change the positioning of the element you want to control by setting its position to absolute. So with relative you can adjust the element to move from it’s original position and with absolute you can move it around it’s parent element as you see fit or if undeclared will fall back to the entire viewport of the <html> element.

<div class="fixed">This is a fixed positioned element.</div>

.fixed {
    position: fixed;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
}

Fixed positioning is similar to absolute positioning, but the element is positioned relative to the browser window, not any ancestor elements. The element remains in the same position even when the page is scrolled. So forget about setting the position of the parent element.

<div class="sticky">This is a sticky positioned element.</div>

.sticky {
    position: sticky;
    top: 0;
    background-color: yellow;
}

And for my personal favorite (that keeps the menu always at the top of the screen) you can use sticky. Sticky positioning is a mix of relative and fixed positioning. An element with position: sticky; acts like a relatively positioned element until it reaches a certain point in the scroll, at which point it becomes fixed in place.

Get Lucas Keller’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

I hope this cleared things up as this was one thing that took me some extra time to learn how this all worked before moving onto CSS animations. Thanks for taking the time to read! :)