Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

CSS Positioning

Keep in mind when positioning elements you are working with the box model. There are three positioning schemes:

Don't worry if you don't understand all that yet, things should clear up by the end of this tutorial. If not, send me a dollar and I promise I won't tell anyone.

The first decision is to choose a positioning scheme. If you don't want the text and other content to flow alongside the positioned element, choose either a normal flow position or absolute position. Choose the float scheme if you do want text and other content to flow beside the positioned element.

This tutorial covers normal flow and absolute positioning. Floating elements are covered in the floats tutorial because it's coded in a different way and, my dumb jokes aside, it also helps to keep this tutorial as concise as possible.

There are two parts to CSS positioning. The first part specifies which type of positioning you want to use. The possible values are listed below:

relative | absolute | fixed | static | inherit

To establish the type of positioning to be used, the first part of the code is written like this:

If you want absolute positioning instead you'd type absolute in place of relative in the code, or substitute whichever positioning type you want. Here's what each of those values mean:

relative

This value positions an element relative to its default position (where it would normally be positioned in the content flow).

absolute

This value uses numerical coordinates to position an element relative to the parent element (or the document body if there is no parent element).

fixed

This value also uses numerical coordinates to position an element, only the element doesn’t scroll with the page, it stays "fixed" in place.

static

This is the default setting. It allows browsers to place elements in the flow of content as they appear in the source code.

inherit

With this value an element inherits the position type from its parent element.

The other part of positioning an element using CSS positioning to name the coordinates where it will be positioned. Let's take a look at a few examples.

Relative Positioning

Notice the code reads "left" and the heading moved right. That's not a typo. It means your adding the distance to the left side of the element. If I coded top: 40px it would add 40 pixels to the top of the element, meaning it would push the element 40 pixels down the page. It may seem a little bit counterintuitive but that's the way it works.

I added the max-width: 200px because without it, the heading created a short horizontal scroll bar on small screens. If you use a responsive design and have the same problem with a positioned element, now you know how to fix it.

Here are the directional values you can use:

left | right | top | bottom

Instead of left I could have moved the position right, up, or down. Quite often an element will be positioned using two coordinates rather than just one as I just + did. The previous example was an inline style. Here’s how to code two coordinates in an embedded or external style sheet:

To use two coordinates, use either top or bottom, and either left or right. Obviously you can't use conflicting values like up and down or you'll cause a traffic jam in Idaho.

Note that setting a relative position property causes it to be moved from its normal position. Other content will not be moved to fill the gap, nor will other content move out of the way. If you position one element where other content sits, they will overlap.

A positive integer moves the element in the opposite direction of the named coordinate. A negative integer moves the element in the same direction of the named coordinate. Use a large enough negative number and you can move elements off the page.

If you're thinking of using negative positioning to enhance your page's search engine optimization, don't. The search engines caught on to this trick long ago. Some old advice still says it works, but it doesn't. The search engines have staff that check for this and other well-known tricks.

Absolute Positioning

While relative positioning is measured from where an element would be in the normal flow of content, absolute positioning is measured from edge or edges named. So with the gold box, it's positioned 5 pixels from the right side and 10 pixels from the bottom because those were the named positions.

Here’s the code for those two boxes:

<div style="position: relative; 
                    max-width: 180px; 
                    height: 140px; 
                    background-color: #cad6b6; 
                    border: 5px solid #607241;">
1
<div style="position: absolute; 
                    right: 5px; 
                    bottom: 10px; 
                    width: 100px; 
                    height: 50px; 
                    background-color: #f3d383; 
                    border: 2px solid #c7a398;">
2
</div></div>

Note that the first division was left open as I added the second division, then closed them both at the end. That's how the parent element was established. It's simply one division nested inside another.

That's not an image either. It's the exact same code as before, except I used negative coordinates, -25 for the right coordinate and -10 for the bottom coordinate.

As you can see, it's possible to "stack" elements using positioning. You can also stack elements using the z-index property, which is explained in this stacking elements tutorial.

Fixed Positioning

You can see an example of this with the corner banner in the upper right-hand corner of the page. You can see it stays there even when you scroll. I'll show you the code, but realize that depending on your page layout, it doesn't always work as you expect.

Sometimes an image may not be positioned as you might expect, depending on what you have going on with your site design. Things like elements with overflow: hidden; can affect the positioning. You can try to track down what is keeping it from going where you coded it to go, which might mess up your layout if you change it, or you can try moving the element closer to where you want it positioned. That can place it outside of the code that is preventing it from executing like you expect.

There's a lot going on with this design, which caused the problem I just outlined. I just moved the image code from the bottom of the page to just after my top menu. Problem solved. Beats spending hours trying to figure out what the hang up is. Here's the code for that:

The max-width: 30vw is so the banner image would scale down on smaller screen sizes. The "vw" is short for viewport width. The "30" is for 30%. The whole thing means the maximum width the image can be is 30% of the screen of the viewing device. The makes it scale down on smaller screens, and limits how big it can be on larger screens.

Sticky Positioning

div.sticky { position: -webkit-sticky; position: sticky; top: 0;}

OK, you're sounding a little wild with your wanting to do things for bad reasons, so I'm going to end this madness right here.