Select Page

The CSS Position Property- what’s absolutely relative

Controlling the position of your elements with the position property

Today we’re going to have a look at the “Position” property in CSS. If you’ve been working with CSS already I bet you’ve come across the position property here and there.

Since positioning elements on your website is essential for it’s overall look and feel, we must have full control over which element is positioned where and how they relate to each other.

While getting into CSS at the beginning, I often got confused when using the position property, experiencing unwanted effects and having problems figuring out where the issue lies.

So let’s try to straighten things out.

 


 

CSS Position – the definition

 

W3schools defines the Position property as followed:

“The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed).”

Well, let’s try to clarify this definition.

“The position property is responsible for the type of positioning used by an element within it’s parent.”

Hmm…this didn’t really clarify a lot, did it….let’s start with the core principles and an easy example.

 


 

Parent – Child relationship

 

The Parent

Birdy

The Parent element is an element that contains other elements

 

The Child

kids

The Child elements are all elements that are contained within that parent.

<body>
    <div class="Birdy">
       <div class="Kids"></div>
    </div>
</body>

In this simple example we have “Birdy” being the parent of “Kids” and “Kids” being the child of “Birdy” (well, Birdy adopted the kids, their not biologically related ;-).

Looking at the code, we see that the DIV with CLASS “Kids” is WITHIN the DIV having the CLASS “Birdy” (or, the “Birdy” DIV contains the “Kids” DIV).

Now, can you guess who the parent of “Birdy” might be? – correct, it’s the “body” tag!

…simple right?

 


 

The Values

The position property can hold four values which control how the elements interact with each other, using the “top”, “bottom”, “left” and “right” property to move our elements on the document:

 

POSITION: STATIC;

This is the default value. The element has no special positioning; it follows the flow of the document. At this state using the “top, “bottom”, “left” and “right” property won’t have any impact on the element.

 

POSITION: RELATIVE;

The element follows the flow of the document, and then offset by the “top” and “left” property.

 

POSITION: ABSOLUTE;

The element is positioned relative to it’s parent that has the position property set to RELATIVE. Using the “top” and “left” property to offset the element.

 

POSITION: FIXED;

The element will be positioned relative to the browser window. The elements won’t move even if you scroll (watch the menu of this website follow you while scrolling).

 


 

Positioning in action

 

So much to theory. Now let’s see some positioning in action using our simple example from above and applying some styles:

 

Position-All static

.Birdy {
    position:static;
}
.Kids {
    position:static;
}

Both (parent and child) position properties are set to “STATIC”. This is the default position. You wouldn’t need to set this, we’re just doing it for reference here. You cann see the two elements following the flow of the document (the child being within the parent)

 

 

static-absolute

.Birdy {
    position:static;
}
.Kids {
    position:absolute;
    top:0;
    left:0;
}

When setting “Kids” to position:absolute and using the top and left property, we can now move the kids wherever we want them (the top and left property are both set to 0 above). In this example the kids are positioned relative to the “body” since it’s actual parent (Birdy) has no positioning set. Now trying to align “Birdy” and the “Kids” nicely would leave you with some freaky top and left values to set, so let’s try and sort this out.

 

 

realtive-absolute

.Birdy {
    position:relative;
}
.Kids {
    position:absolute;
    top:200;
    left:0;
}

Now we have the “Kids” being positioned relative to it’s parent (Birdy). By simply setting the position property for “Birdy” to “RELATIVE”, we managed that the reference point for the “Kids” position now is “Birdy’s” top-left corner (and not the “body” anymore). Now aligning the “Kids” to sit down by it’s parent, we simply set the top and left values (here we just set top:200;).

 


 

As you can see, controlling the position of your elements is “relatively” easy when knowing where to set which values.

Download the example below and start playing around with the position of Birdy and it’s Kids (all CSS properties are in the html document)

Download

If you have any questions drop me a line or leave a comment below.

Jaime

 

 

 

Submit a Comment

Your email address will not be published. Required fields are marked *

11 + eighteen =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It on Pinterest