CSS3 Tutorial for Beginners: 34 Absolute Positioning Element (Div)

This is Sasha and welcome to another CSS tutorial training video where I share with you some insights about how to manage and modify your business website. Today, we’re going to take a look at the absolute position tag or element in your website. Let’s take a quick peek at how this works within CSS.

We already talked about the float element, floating things left or floating things. If I float this element to the right, you can see this green box goes directly to the right. If I float it to the left, I can go ahead and do that and then it will float to the left over there. That’s one way of doing it.

--------------------- HTML CODE ------------------

--------------------- CSS CODE ------------------

.navi {background: #506fd3;}

.leftcol {
	background: #5dc17b;
	width: 200px
	float:right;
}

But what if you want to position something a certain amount of pixel from the top and the left or the right? Well, how do you do that? Well, the way that you do that is by using the position rule right here or element and then what you go ahead and do is you have right here, you can see there’s all static, relative. We’re going to do the absolute value.

If I go ahead and do that, you can see not much has changed. What you also need to do is go ahead and add a couple of other things in here and that would be the top tag which is kind of like a top margin in a way when you think about it so you could add in a top margin area or space of let’s say 300 pixels, and you can see this positions it 300 pixels.

--------------------- HTML CODE ------------------

--------------------- CSS CODE ------------------

.navi {background: #506fd3;}

.leftcol {
	background: #5dc17b;
	width: 200px
	
	position: absolute;
	top: 120px;
	left: 96px;
}

If I did only let’s say 120 pixels and it positions it from the top 120 pixels. And then what I could also do is the left side which let’s say it’s 96 pixels right here and what that does is now position at 96 left.

It’s kind of like a margin property, but the difference here is as you get into let’s say the navigation here and allow me to expand this out, and we’ll go ahead and expand this div, and I’ll add some breaking spaces. You can see that it doesn’t affect the flow of my element because it’s positioned right there within the parameters that I defined, okay?

--------------------- HTML CODE ------------------

--------------------- CSS CODE ------------------

.navi {background: #506fd3;}

.leftcol {
	background: #5dc17b;
	width: 200px
	
	position: absolute;
	top: 120px;
	left: 96px;
}

You can see I can continue doing what I usually needed to do within my navigation, within that other div right there and it doesn’t affect that little green box that I’ve positioned absolutely because when you say something is positioned there, that’s where it’s going to be positioned.

That’s ultimately how you do absolute positioning if you need it on a specific part of the page. It gives it a linear dimension if I resize the browser, you can see that also has no impact on that because it’s entirely from the top and the left exactly there.

--------------------- HTML CODE ------------------

--------------------- CSS CODE ------------------

.navi {background: #506fd3;}

.leftcol {
	background: #5dc17b;
	width: 200px
	
	position: absolute;
	top: 120px;
	right: 96px;
}

If I go ahead and add this and change this to the right, you can see it’s 96 from the right side. If I resize the browser here and I go ahead and move it, you can see that box will also shift and adjust, okay? Ultimately that’s how that works in that property to make and modify a position to have it with the absolute size or full area of your page.