As a web developer or designer we must be frequently facing a task to create a webpage layout. In creating that, positioning a stacked-random element usually put through a nightmare for us, fortunately CSS and its beautiful properties help us cure that nightmare and in this post i will explain how to take advantage of the two CSS positions, relative and absolute.
Relative Versus Absolute
Before we go to take these advantages we must be acquainted with them. I quote these two positions explanation from w3schools, here they are :
Relative : Generates a relatively positioned element, positioned relative to its normal position, so “left:20″ adds 20 pixels to the element’s LEFT position.
Absolute : Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties.
Got the point? Yes the element that have position relative will take itself relatively positioned based on our request and its previous elements while absolute will take itself absolutely positioned based on our request where it must be positioned in our webpage.



Top, Left, Bottom or Right
So we can use the absolute position to put our any elements in the webpage accordance to our wishes, at this point we can use another properties such as top, left, bottom or right, unfortunately if we use these properties our element will relatively positioned with the document, then the question is how to make the element relatively positioned to the other element? In simple words our absolutely positioned element’s position will be limited by another element.
The question can be solved by bind the absolutely positioned element with relatively positioned element, the last element will automatically being a limiter to its absolutely positioned content and this is the advantage of engaging them. We can easily manipulate any elements to absolute position with limitation.


HTML
<div id="container"> <div class="new"> </div> <div class="sticky"> </div> <div class="get-pro"> </div> </div>
CSS
#container { margin-left: auto; margin-right: auto; width: 650px; min-height: 100px; background: #fff; padding: 5em 5em 5em 8em; text-align: center; position: relative; } .new { position: absolute; left: 0; top: 0; display: block; height: 108px; width: 108px; background: url('images/new.png') top left no-repeat; } .sticky { position: absolute; left: 6px; top: 120px; display: block; height: 213px; width: 218px; background: url('images/sticky.png') top left no-repeat; } .get-pro { position: absolute; right: 0; top: -21px; display: block; height: 185px; width: 90px; background: url('images/get-pro.png') top left no-repeat; }
The script above will generate three elements with absolutely positioned and one element with relatively positioned, for setting these three elements position we manipulate its left, right or top properties and they will overlapping its container element that relatively positioned. We can use this tecnique (for example) to display stacked-random element, overlapping element from its container, etc.
That’s it, thanks for reading! You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed or webstuffshare FREE Email subscription. If you like this post, your sharing and feedback would be very appreciated
Engage 2 CSS Positions : Relative & Absolute (via @hdytsgt)
[Community News] jQuery Fundamentals
RGraph : HTML5 Canvas Graph Library
jQuery Plugin : jQuery iPhone UI
Pikachoose : Another jQuery Plugin for Image Gallery
HTML5 Security Cheatsheet
[Community News] How to turn any jQuery plugin into a Wordpress one
Zoom Your Element Using Zoomooz.js
[Community News] Build a Flash-like Game With Scripty2
[Community News] CSS3 Transitions available on Firefox 3.7
[Community News] CSS from the Ground Up
- How To Create iPhone-Style Navigation (Part I)
This post has got 23 shouts so far - jQuery Plugin : jConfirmAction
This post has got 34 shouts so far - iPhone-Style Navigation:AJAX + Rotate (Part II)
This post has got 12 shouts so far - Simple Flip Puzzle Effect with jQuery
This post has got 6 shouts so far - Howto Create Mac-like Login Form
This post has got 7 shouts so far - Implement Password Strength Meter & Gauge.js
This post has got 8 shouts so far - Stylize Your Own Checkboxes
This post has got 15 shouts so far - Create Animated Navigation Menu From Stratch
This post has got 7 shouts so far
- showing database connection error… to check...
by melwyn on Pikachoose : Another jQuery Plugin for Image Gallery - Great article! I’m from Brazil, I’ve been following your...
by Thiago on [CodeSnippet] CSS3 Flying Menu - Looks nice
by TheShadow on Filter Image View Using jQuery - Nice drop down menu tutorial.
by TheShadow on Simple CSS3 Dropdown Menu - love your site
by eJobsViet on Free Web UI Element Pack




CSS Brigit | Engage 2 CSS Positions : Relative & Absolute
Engage 2 CSS Positions : Relative & Absolute…
As a web developer or designer we must be frequently facing a task to create a webpage layout. In creating that, positioning a stacked-random element usually put through a nightmare for us….