How to use relative position in CSS

CSS, HTML5, Web Design

Sometimes on a webpage, you need to tweak the position of something by a little bit.  Say you have an image that needs to move over a couple of pixels or a video that needs to be shifted over.  For that, we use a CSS position property called relative.

Relative positioning moves something from where it used to be originally.  If I have something in my footer down at the bottom of the page, and I relative position it, it will move from where it used to be down at the bottom in the footer.  To show this, let’s create two divs like so:

<div style=”margin-top:200px;margin-left:200px;”>

<div class=”relativePosition”>I move from where I was originally</div>

</div>

Here we have a div with another div inside of it.  The first div has a margin-top of 200px and a margin-left of 200px so it is 200px from the top and 200px from the left of the page.  Inside of that div we have another one that is positioned relatively.  This is the one we want to pay attention to.  It has a class called “relativePosition” applied to it which we will use later in the CSS to select the div.

Now add this CSS in a style tag in the head tag or an external CSS style sheet:

.relativePosition{

position:relative;

top:75px;

left:50px;

}

This CSS applies the relative position to the inner div and moves it 75px from the top and 50px from the left of where it used to be.  That’s the key, relative positioning moves divs from where they were originally before the CSS position was applied.

Position relative is very useful for small movements of things on a webpage.  Just nudging them around to get the content in the right position.  If you want to learn more be sure to check out our HTML5/CSS3 training.  Have an amazing day!