July 6, 2016

Fixed Positioning

fixed positioning css tutorial

Position: Fixed;

Another widely used positioning system for design and functionality is fixed positioning. An element that is positioned with a fixed value will be just as the name suggests; fixed to the location specified in the coordinate declarations. When the page is scrolled, the element will move with the page in its designated location. This is commonly used for things like logo’s and navigation menu’s that the designer wants to fix to the top of the browser window as the user scrolls down the page. Clear Coded Programming uses fixed positioning for its nav menu. This makes it easier for the user to navigate pages because they don’t have to scroll back to the top of the screen every time they want to visit a different part of the website. Refer to the images below for an example of an element that is using fixed positioning.

fixed positioning html

fixed positioning css

position: fixed display

In the index.html document, we have one h1 element and a bunch of p elements. The h1 heading is the element that we are going to position fixed. All of the p elements are displaying in block format by default. They are there to simulate a long web page, so that you can see how the fixed element is affected by page scrolling.

We have two rules in our CSS style sheet. The first one is for all p elements on the web page. It has some color declarations, a height, and a margin in order to create a longer web page. The second rule is for the h1 element that we are using fixed positioning on. Background-color, color, and padding declarations are used to create a heading that is noticeably different from our p elements. We use position: fixed; and give top and left coordinates that tell the browser to display the h1 50 pixels from the top and 600 pixels from the left of the browser screen. You should also note that when using top and left coordinates to position an element; the top-left corner of the element is the specific point that your positioning. Basically, it’s the X marks the spot. If you used bottom and right coordinates; the bottom-right corner of the element is the specific point that you’re positioning. So, say your computer screen is 1000 pixels wide and you set the left coordinate to 500px. This would position the left corner of the element at the 500-pixel location, and depending on how large the element is may look like it’s way off from where you told the browser to display it. Keep that in mind when using any positioning system in CSS. Tweaking your code with small adjustments is very common in web design.

Just like in the ABSOLUTE POSITIONING lesson, you can also use bottom and right to position the element. It depends on what you prefer. Now, when the page is run, we have many paragraph elements that have a 50-pixel margin space between them that run way down the page. And the h1 element’s top-left corner is displayed exactly at 50 pixels from the top and 600 pixels from the left of the browser window. Note that depending on the screen size you’re viewing the page on, it may look different from the image in this lesson. Fixed positioning can be a little tricky when you are creating a responsive/flexible website(one that adjusts or changes to look good on all screen sizes). When you scroll up and down the page now, the h1 element that is positioned fixed will stay put where you specified in the coordinates while the p elements scroll off the visible part of the web browser. Re-sizing the screen has some different effects as well. See the short demo video below for scrolling and resizing the browser window to get a better idea of how fixed positioning works.

Fixed Positioning Scrolling And Resizing Demo


That finishes up this fixed positioning lesson. You can try creating a very long page with many block and/or inline elements on it, and then in the CSS, change a few of them to postion: fixed;. Don’t forget to add the two coordinate declarations. You can use CLASSES to position specific elements. Thanks for reading, and I’ll see you in the next lesson.

index.html Source Code


<!DOCTYPE html>
<html>
<head>
<title>Fixed Positioning</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>

<h1>Clear Coded Programming (Fixed Heading Element)</h1>

<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>
<p>Just a paragraph in its default block format.</p>

</body>
</html>

my-styles.css Source Code


p{
background-color: blue;
color: white;
height: 50px;
margin: 50px;
}
h1{
background-color: black;
color: red;
padding: 10px;
position: fixed;
top: 50px;
left: 600px;
}

Clear Coded Programming

Please Leave a comment