Tutorials, Tips, and Resources

for Creating a Better Blog



7-Day Blog Bootcamp Challenge


Shape up your blog in a week! (learn more)



CSS Lesson 2: DIV Positioning

Now that you’ve read through my Introduction to CSS and Lesson 1: DIV Elements, you should have a basic understanding of the way the <div> element works. In this tutorial, I’m going to teach you all about <div> positioning which will help with creating certain website elements, like a floating menu bar.

Static Positioning

Example:

#nav {position: static;}

Where #nav is your ID selector.

Static positioning simply means that the <div> section remains in its place… It remains “static”. There is no special positioning applied to the element.

Relative Positioning

Example:

#nav {position: relative;}

Where #nav is your ID selector.

Relative positioning is basically saying that the element is static (in its place), but allows you to add some additional properties to move it around, relative to where it was positioned.

Example:

#nav {
position: relative;
top: 30px;
left:30px;
}

this box is 30 px from the top of its container, and 30 px from the left

The above code tells the element to move 30px from the top of where it is positioned, and 30px to the left of where it is positioned. You can also style this some more:

#nav {
position: relative;
top: 30px;
left:30px;
background-color: #000000;
color:#ffffff;
}

Now, the element will have a black background and white text.  Remember: relative positioned elements can “shift” from their static position within the code.

Fixed Positioning

Example:

#nav {position: fixed;}

Where #nav is your ID selector.

Fixed positioning means that the element will stay in the exact same place on your screen, even when you scroll down. See that black box in the top left of the screen? That’s an example of a fixed element. The same properties are used to position it as in the relative positioning (top, left, bottom, right). This is the positioning you want to use if you want a fixed menu bar or area of content to stay visible as you scroll down the page. Unlike a relative positioned element, a fixed element is removed from the flow of the web page, which means that it ignores any elements it might be contained within and instead uses the viewport (or screen) as a base for its positioning, NOT any element it may be contained within. This means that it can overlap other parts of your web page depending on where you position it.

Example:

#nav {
position:fixed;
top: 0px;
left:0px;
width:200px;
}

In the code above, we are telling the #nav element to be fixed to the very top of the screen, and the very left of the screen.

fixed element example

Absolute Positioning

Example:

#nav {position: absolute;}

Where #nav is your ID selector.

This one is a little tougher to grasp, but once you do you can really create some cool things with it. Absolute positioning is almost like fixed positioning, except instead of positioning the element relative to the screen, it is positioned relative to the nearest positioned ancestor, or rather, the first element that has a position other than “static”.  If there isn’t a positioned element to be found, it will position it relative to the <html> block, or document body. In this case, it is also removed from the flow just like the fixed element and can be positioned anywhere on the screen instead of within an existing element. It can overlap existing elements.

#navholder {
position:relative;
top:0px;
left:0px;
width:300px;
}

#nav {
position:absolute;
top: 40px;
left:200px;
width:200px;
}

This is the #navholder element

This is the #nav element, absolutely positioned within the #navholder element.

Test Time!

Try adding each of these elements to your website to see what they do. It’s usually easier to grasp these concepts when you can actually get your hands dirty and see what happens when you change properties of each one.

You don’t just have to position <div> elements, you can position any type of element you like!  Pop on over to W3Schools and try some examples. You can view a list of positioning properties there, too!


  • My question is, on blogger, where do I input the actual content? If I were to do social media icons, which I want to do, with fixed positioning, do I post the icons in a widget or just straight into the HTML code on blogger?

    I hope that makes sense.

    • Dana Fox

      You can do either! If your content can tie in with your sidebar content, it’s usually easier to just create a new html/javascript widget and do the code in there.

  • Job Gichana

    I won’t thank you enough, Dana Fox, especially leading to the W3Schools. Thanks a lot for your kindness.

    • You are very welcome! @job_gichana:disqus

  • Hey girl, I just had a quick question. Right now, my nav bar is relative, so it shows up right below my blog title when you go to my site. So when I scroll, it stays in the same position. I’ve been trying to find the right code to make it appear as it does now, but as I scroll down, it will stick to the top. Kind of like yours does now. If you could give me some tips on how to get that started I would greatly appreciate it. Thanks so much! And I loveee your site!

    • What you want is called a sticky nav bar or menu. I hope that helps you find a code!

Navigate