CSS3 Tutorial for Beginners: 35 Fixed Positioning Element

This is Sasha and welcome to another CSS tutorial where I share with you how to modify and edit your business page. Now today, what I want to do is take a look at the fixed position when it comes to CSS. Let’s see how this works.

What I’ve done is created a few div elements two, I have the blue one, and I also have the green one, okay? We have a navigation at the top and then also have just left column class that I’ve created with some dummy text right there and the CSS code that I have is just again navigation, and the key thing to note is this position is fixed, okay?

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

 

 

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

.navi {
	background: #506fd3;
	padding:15px;
	color:#fff;
	position:fixed;	
}

.leftcol {
	background: #5dc17b;
	clear:left;
	margin-top:45px;
	position: absolute;
	z-index: -99;
}

The other column that I have is just positioned is absolute, and I added z-index of -99 which we’ll cover in another video. I’ll show you a quick example of what that means. As I scroll things down, the z-index allows me by adjusting this, will enable me to go ahead and make sure one of those elements is in front, one of those is in the back.

The fixed position property

In either case, take a look at this, what the position fixed allows me to do and you’ve seen this probably on some navigation menus is that if they scroll down – user scrolls down, that fixed position enables you to keep things exactly where they are and often this is good for background images.

If you take a look right here or navigations or even advertisement, so as I’m scrolling, you’ve probably seen things like navigation like this, as you scroll that navigation is still at the very top and that’s ultimately what the position fixed allows you to do. Now, keep in mind this is based on the absolute position of the other columns, so that’s how that works and functions. If you also do the background and you do a background position fixed, it also has that element.

If I do a background position and then you can type in a fixed position or static position, then you also get that same kind of result, but you might want to double check that element. I’d have to use some testing with that to recall exactly what that is. But ultimately when it comes to the divs, this is how you go about it in creating something that’s fixed at the very top so that way that navigation is always at the top. You can also do the same thing when it comes to images.

Working with the fixed property and images

Looking here at a quick little background that I set up to give you an example, this is how you do it when it comes to background, and its background-attachment is fixed or top right no-repeat. When I do the background-attachment fixed, you can see I still have my little div at the top.

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

 

 

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

body {
	background:url("https://cdn.pixabay.com/photo/2017/02/17/14/46/ray-2074248_1280.jpg")
	top right no-repeat; background-attachment: fixed;}

.navi {
	
}

.leftcol {
	margin-top:45px;
	position: absolute;
	z-index: -99;
}

I still have my other div right there with all the items. But now as I scroll down, you can see that position on that background is fixed, and it will not change. As I’m scrolling, there are no changes, and of course if I go ahead and do background-color here, I make this color white so you can see – you can see as I scroll that background back there does not move.

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

 

 

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

body {
	background:url("https://cdn.pixabay.com/photo/2017/02/17/14/46/ray-2074248_1280.jpg")
	top right no-repeat; background-attachment: fixed;}

.navi {
	background-color: #fff;
	position: fixed;
}

.leftcol {
	clear:left;
	margin-top:45px;
	position: absolute;
	z-index: -99;
}

If I go ahead and do let’s repeat a position on this one, I do fixed position right here, I’ll go ahead start scrolling, and you can see that also stays at the top there. If you want things to be fixed positions, they kind of hold that position, this is how that power or that element works.