CSS

CSS Absolute Position Example

The aim of this example is to explain the usage of absolute positioning.

This is a very powerful type of positioning that allows you to literally place any page element exactly where you want inside the webpage.

Remember that these values will be relative to the next parent element
with relative (or absolute) positioning. If there is no such parent?

Well, it will by default go all the way back up to the element itself meaning it will be placed relatively to the page itself.

Lets first see basic application, and then go into more advanced stuff.
 

1. Basic Setup & Application

Go ahead and create a new html document and add the basic sytnax in it like so:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Absolute Position Example</title>
</head>
<body>

<!-- STYLE SECTION -->

<style type="text/css">

</style>

<!-- HTML SECTION -->

</body>
</html>

Now, to apply this property first add an element in html and then give it an absolute position, ie a level 2 heading:

<!-- HTML SECTION  -->
<h2>This text is positioned absolutely right</h2>

Now give it the position: absolute; in css and some top and left alignment:

h2 {
	position: absolute;
	top: 50px;
	left: 60px;
}

The result would be a text positioned absolutely according to the values we gave:

Absolute Positioning Basic Application
Absolute Positioning Basic Application

2. Cases and Examples

In this sections we are going to see some examples of the usage of absolute positioning.

2.1 Positioning an Image

Our task here will be to position an image in the middle of the ending line of a box. I have set up the html like below:

<!-- Example One -->
<div class="wrapper">
<div class="box">
<div class="header"><p>This is the absolute positioning example.</p></div>
<div class="body">Basically, I want to add an image to the middle of the right bottom ending line of this box.</div>
<img src="image.jpg">
</div><!-- end box -->
</div><!-- end wrapper -->

And added this css to make it look like a box with some text and an image:

/* Example 1 */
.box {
	width: 40em;
	height: 25em;
	background-color: #fff;
	border: 1px solid #ccc;
	margin: 5em 4em;
}

.header {
	width: inherit;
	height: 3em;
	background-color: #cbcbcb;
	border: inherit;
	text-align: center;
}

img {
	right: 0px;
	bottom: 0px;
	border: 5px solid #ccc;
}

For now, the view without any position application would be:

Before Applying Absolute Positioning
Before Applying Absolute Positioning

Now, because I want to make the image sit in the lower right bottom of the line of the box, I am first giving the box
a relative positioning and then an absolute positioning to the image, this is because the image will be positioned absolute taking the box as the refer div. After these touches in css the code will look like this:

/* Example 1 */
.box {
	width: 40em;
	height: 25em;
	background-color: #fff;
	border: 1px solid #ccc;
	margin: 5em 4em;
	position: relative; 	/* added relative positioning */
}

.header {
	width: inherit;
	height: 3em;
	background-color: #cbcbcb;
	border: inherit;
	text-align: center;
}

img {		
	right: 50px;			/* algined 50px far from the right line */
	bottom: -120px;			/* algined 120px below the actual position */
	position: absolute;   	/* added absolute positioning */
	border: 5px solid #ccc;
}

The view, as you’d expect, would be:

Absolute Positioning applied to an Image
Absolute Positioning applied to an Image

2.2 Positioning Several Elements

Look how we can create a beautiful content out of an image and some text with the help of positioning. Consider this html:

<!-- example two -->
<h3>I am the title!</h3>
<p> I am a short description of the image.</p>
<img class="ex3" src="image.jpg">

It would look like this without css or any positioning:

Another Example - Pre-Application of Positioing
Another Example – Pre-Application of Positioing

Now, consider the following css which gives the text a white color, relative positioning to the image and absolute to the

other two text elements which will sit inside the image, then with some spacing around the corners and giving a z-index:

/* Example 2 */

h3 {
	position: absolute;
	top: 0px;
	left: 20px;
	color: white;
	z-index: 1;
}

.ex3 {
	position: relative;
}

p {
	position: absolute;
	z-index: 1;
	color: white;
	top: 210px;
	left: 20px;
}

This time, the view in the browser would be:

Image Content using Absolute Positioning.
Image Content using Absolute Positioning.

3. Conclusion

To conclude, we can say that positioning is an essential concept in CSS and will probably be neccessary to align your icons next to an input field inside a form, or whenever you want to sit elements in some constrained zones in the page.

It provides a easy way to do that with support on all browsers. However do remember that positioning is very well optimized in front-end frameworks which make the best use of it so as not to affect other elements.

4. Download

Remember to uncomment the examples you want to see because it results in a layout mess if you have them all.

You can download the full source code of this example here: CSS3 Absolute Position

Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments
Back to top button