30. Position Fixed & Side Placement Slides

				
					
div{
position: fixed;
}
				
			
				
					
div{
left: 10px;
top: 5px;
}
div{
bottom: 10px;
right: 5px;
}
				
			

Video Summary

Alright, in this section we’re going to learn about the position property with the fixed value. So this is where we can basically fix a certain elements on the screen. No matter where we’re at, it will stay in that position the entire time. And if you think about this, you can think of like navigational menus. So if you’re thinking about a menu up here, and you start scrolling down the page, that menu will always stay at the top. So that way no matter where you’re at, you can potentially find to go and navigate to the next page on this also works for the scroll up button. So over here we have this example. But have you ever seen where you have like a little icon with an up arrow and as you scroll down to the bottom of the page, if you click that arrow, click that icon and scroll through all the way at the top. There’s also many cards and chat icons that happen right here. So basically, no matter where you’re at, no matter what page you’re on, this, this little section will stay right there. And before we hop into code pen, and we start playing around with this, I do want to go over one additional property value and that’s site placements. So this is how we’re going to dictate exactly where we’re going to have this element fixed on our webpage. And you can use left top and bottom and right now you can use these individually or you have to use them with the opposite side. So what I mean by that is that you cannot have left and right in the same while your chart or you’re putting declarations for this one element because they’re conflicting on each other. Same thing with top and bottom. You can have top and bottom at the same time but you can have left top or left bottom or right bottom or bottom left, right. So with that being said, this is how we’re going to be able to position all of our elements within CSS to really utilize this fixed position value. So with that being said, let’s hop over to code pen and start playing around.

PHP Code Snippets Powered By : XYZScripts.com