Put it Where You Want It! CSS Positioning Explained.

Getting something to sit exactly where you need it to on a page can be a bit tricky, but if you have a good understanding of how it all works, you can make anything happen! This helpful CSS video tutorial will walk you through the three main types of CSS positioning options available when laying out a page.

In this video, each of the three most commonly-used values for CSS position are discussed separately beginning with relative; and then moving onto absolute; and fixed;. The two types not covered, static; and inherit;, are quickly mentioned but are not a focus of this lesson.

When using the relative; property, it is important that to remember that it is relative to where the object would be without any positioning applied. So if you were to position an object 20 pixels from the top and 40 pixels from the left, then it is moved to the right 40 pixels and down 20 pixels from where it was originally. You can see how the code looks here.

#child_div {
    background: #fff;
    width: 200px;
    height: 200px;
    position: relative;
    top: 20px;
    left: 40px;
}

Now we take a look at position: absolute;. This is very different from using relative; positioning because the object is placed in relation to the page, rather than its original placement or any other factor, unless you specify that you want your object placed inside of a parent container with any position value other than static or inherit. So if you position it 20 pixels from the top and 40 pixels from the right, you will see your object in the upper right hand of the page, as shown in the video.

On that note – if the parent container is not positioned relative or absolute, the absolute-positioned element you’re styling will be offset from the nearest parent up with relative or absolute position! This can get confusing, so just remember – every element is position:static until you explicitly give it another value.

#child_div {
    background: #fff;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 20px;
    right: 40px;
}

Lastly we see how position: fixed; differs from the first two types. This kind of positioning is used when you want something to be positioned in relation to the browser window. This means that as you scroll down a page, the object in question will remain in a fixed spot on the screen and not move with the page. This can be useful for static navigation bars and footers, as well as promotional banners, to name a few popular uses. If you simply wanted an object to stay in the upper left-hand corner of your screen, your code would look something like the example below.

#child_div {
    background: #fff;
    width: 200px;
    height: 200px;
    position: fixed;
}

We hope you enjoyed this quick lesson in CSS positioning and encourage you to stick around for at least one more tutorial! How about this one on creating an nice navigation bar? Thanks for stopping by, we’ll see you again soon!