How To Set Position With CSS

Aria likes to nap. A lot. Often Aria will nap on something, like a plastic bag or a book just because it is on the floor, even if it is not very comfortable. Other times Aria likes a blanket and sometimes that blanket isn’t quite in the right place and so she wants it to be moved.

And that job falls to me because I have thumbs. And because Aria is lazy.

There are lots of ways Aria can let me know where she wants the blanket in the room, just like there are lots of ways you can use CSS to position your elements.

The position property in CSS helps you set where on your page your elements should be by helping to define a starting point.

        position: 
      

The margin property and the float property will help you set the position of your elements with CSS, but you might find using position easier. Or you can use both!

Like many other CSS properties, the position property has a default value which all HTML elements use unless you decide to make use of the position property in a different way.

        position: static;
      

With position set to static, as it will be by default, HTML elements will be placed directly below the previous element; unless you choose to use float of course.

An alternative is to use the value relative.

        position: relative;
      

Relative positioning allows you to set the position of your HTML element relative to its default position. To move elements away from their default position you can use these four CSS properties.

        top:
        bottom:
        left:
        right:
      

Imagine Aria is telling me where she wants me to move her blanket to. She might ask... Actually, let’s be honest, she won’t ask anything. She might tell me to move it slightly to the left or up a little bit.

This is essentially what these properties let you do. Instead of an element’s normal position you can budge it a bit to the right or shift it down a bit.

Setting position to relative and using these properties moves the actual element position whereas using margin adds a gap which pushes your element. With margin, nothing else can occupy that gap but with top, bottom, left and right, other elements can.

Here’s an example.

Another option is to set your position value to absolute.

        position: absolute;
      

Absolute lets you use the top, bottom, left and right properties to define an exact position of an element inside a div with its position set to relative. The element with position set to absolute will move with its div.

Let’s go back to the blanket example. Imagine Aria has a toy at the bottom of her blanket.

        <blanket>
        	<toy></toy>
        </blanket>
      

And imagine Aria wants to move her blanket to the right but keep her toy in the same place on her blanket.

        blanket {
        	position: relative;
        	right: 100px;
        }
        
        toy {
        	position: absolute;
        	bottom: 0px;
        }
      

With this new code, the blanket has moved but the position of the toy is the same.

The toy can then be placed anywhere on the blanket by adjusting the top, bottom, left and right properties. In this case, with bottom set to 0px, it will sit right at the bottom of the blanket. But we can move it to a different corner just by changing the CSS properties we use.

        blanket {
        	position: relative;
        	right: 100px;
        }
        
        toy {
        	position: absolute;
        	top: 0px;
        	left: 0px;
        }
      

This is commonly used to lay text over a photo. Take this HTML for example.

        <div>
        	<img src="lazy_aria_19.png">
        	<h1>Lazy or deep in thought?	</h1>
        </div>
      

Without any CSS, other than code to set the size of the div, image and the text, here is what this would look like.

To overlay the text onto the photo, we need to move the text to an absolute position which is based on the div it is sat in.

To do this, first set the position of the outside div to relative.

        div {
        	position: relative;
        }
      

Then set the position of the heading to absolute.

        h1 {
        	position: absolute;
        }
      

This code allows you to move the headings to wherever you want it to be over the image. Let’s say you wanted the text towards the bottom of the image and slightly off center, you could use this CSS.

        h1 {
        	position: absolute;
        	bottom: 20%;
        	right: 5%;
        }
      

And this is what your code would look like.

This can look really clean as a homepage screen if the image was made to take up the whole page.

The last example that can be used with the position property is the fixed value.

        position: fixed;
      

As you might have guessed, this fixes the element in place so it doesn’t move. Elements in a fixed position aren’t affected by scrolling and appear to sit on top of your web page.

The tree is fixed. Aria is stuck and there's a difference.

With position set to fixed, use top, bottom, left and right to define a set position on your page for your element. When your user scrolls the element will move with the user so the element appears to stay in the same, fixed location on the screen.

        #fixed-div {
        	position: fixed;
        	top: 10%;
        	right: 5%;
        	width: 33%;
        }
      

Click here to reveal a div with a fixed position. Scroll up and down to see what happens.

Now try scrolling