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, 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

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