How To use Relative & Absolute Positioning in WordPress Stylesheet

If you want to design your WordPress blog theme yourself then the style-sheet of your theme template plays the main roll. There are many rules to design the template. I won’t go in details about that. Rather, I will discuss here about the interesting operator “position”.

[Tip: Learn how to Add Thumbnails Automatically in Home Page Excerpt.]

The operator “position” can be defined for two types:  Relative positioning and  Absolute positioning. In the style-sheet, we define those properties as {Position: relative; }and {position: absolute;} respectively. Both of the properties are used to decide the positioning of an element.

Where to use the relative positioning and where the absolute positioning

Generally in the WordPress theme design template relative positioning is used. Relative positioning will place the element sequentially according to the placeholder, defined in the coding template.  For example, suppose that the coding template is like this:

<div class="main-area"> ......... ......... </div>

<div class="sub-area"> ............ ............ </div>

The design code of that portion in style-sheet is

.main-area{width:300px;height:200px;margin-left:10px} .sub-area{width:300px;height:200px;margin-top:10px;}

The above design will show the “sub-area” element just after the “main-area” element. By default it holds the relative positioning. So when you increase or decrease the value of “margin-top” it will measure that from the previous place holder “main-area”.

But if you use the absolute positioning property then it will start from the very earlier start of the parent element. That means you can place the portion any where after the parent element keeping the place holder in the same order at the coding template. Let me describe with an example.

If you visit Digital Inspiration then you can find that in the very below of the site they have used a script to go back to the top of the page.

Though they have defined the script out side of the container but you can define code for that script inside the container (under the footer section) and show that at the position where they have kept it. For instance if the element for the placeholder is “.out” then you can write the CSS rule as

.out{position:absolute;top:50px;left:300px;float:write}

Adjusting the margin you can fix the position. Use the following operators to fix the margins in absolute positioning instead of those, used for relative positioning .

top instead  of margin-top; left instead of margin-left; right instead of margin-right; below instead of margin-below;

Visit here to learn more about absolute and relative positioning.