What is meant by fixed positioning and what is the difference with absolute positioning?
For fixed positioning the same rules apply as in the case of absolute positioning: the “fixed” value set to the “position” property indicates that the element should be positioned in absolute mode with regard to the HTML root element which coincides with the browser’s area, thus subtracting it from the normal flow of the document. The element is subsequently positioned on the basis of the value of the coordinates provided through the properties: “top”, “left”, “right” or “bottom”.
The difference with absolute positioning consists in the fact that when the user scrolls the page, the element with fixed positioning does not scroll with it but remains fixed on screen.
After having discussed the theoretical part it is the moment to pass on to practice and see how to implement this property inside our works.
How is fixed positioning used?
As a practical example we will take into consideration a real case applied to the theme of our blog, the fixed positioning of the three icons relative to our Twitter, Facebook accounts and feed subscription.
If you have a video resolution superior to 1024px of width you must have noticed that these three icons – displayed on the external right side of our blog’s container – keep staying in their original position even when the page scrolls down.
<body>
<!-- START SOCIAL FIXED -->
<div class="box-fixed">
<a href="#" title="YIW on Twitter">
<img src="images/bg/fixed/twitterfixed.gif" alt="twitter" />
</a>
<a href="#" title="Become a Fan">
<img src="images/bg/fixed/facebookfixed.gif" alt="facebook" />
</a>
<a href="#" title="subscribe feed">
<img src="images/bg/fixed/rssfixed.gif" alt="rss" />
</a>
</div>
<!-- END SOCIAL FIXED -->
You must be asking yourself at what point of the document is this markup inserted?
We said that the fixed positioning subtracts the content from the normal flow of the document thus it can be inserted at any point because it’s anyway going to be subtracted from the flow of the document and positioned on the screen according to the values subsequently defined with the properties: “top”, “left”, “right” or “bottom”.
For example on the theme of YIW we have added it exactly in the beginning of the document, immediately after the <body> tag.
As you might have noticed in the HTML markup we have assigned a class named “box-fixed” to the section which contains the three images; now let’s see which properties to assign to this class so that the contents of this section can always remain fixed on the screen even when the page is scrolled by the user:
.box-fixed {width:60px;position:fixed;top:370px;right:15px;z-index:0;}
As you can see – by analyzing the line of code provided above -we have assigned a width of 60px to our box and then we have positioned it in fixed mode on the screen bringing it to a distance of 370px from top of the browser window and to 15px from the right side of the browser window.
What’s the z-index property for?
Probably you are asking yourself wondering what’s the “z-index” property for set on zero.
I would like to dedicate an entire article in the future regarding the use of the “z-index” property since it is a very interesting property introduced by the CSS2 specifications: in practice through the use of this property we can have our boxes on more levels – in case the later are found to occupy the same area of the screen – (for those who use photo-retouch programs the functioning is similar to the layers made available by these applicatives) defining the order of overlapping. The elements which are set on a higher value are arranged higher compared to elements which have a minor value.
In our specific case when the user finds himself scrolling the page all the way to the bottom we need to handle the section of the three icons in such a way that it is positioned below the footer layer so that these go under the footer background avoiding to give the unpleasant aesthetic effect of three white squares positioned on a red background. Here’s explained the presence of this property inside our line of code. However, we will resume this argument in a future article in which we will see in depth the use of this property.
Conclusions
We have said – and I repeat it – that the positioning of elements is one of the toughest arguments regarding the CSS, after the use of absolute positioning dealt with in the previous article this week we have examined also the employment of fixed positioning.
As you had the chance to see, once understood the functioning and use of these properties, there’s little left to obtain effects of a remarkable aesthetic impact and what’s more important you no longer have limits in positioning the elements in the desired spots inside your layout.
And to you, has it ever happened to correct or review yourself a particular layout just because you were not able to position certain elements as they were originally designed?
Source : http://www.yourinspirationweb.com/en/css-tips-how-to-use-the-position-fixed-property/
For fixed positioning the same rules apply as in the case of absolute positioning: the “fixed” value set to the “position” property indicates that the element should be positioned in absolute mode with regard to the HTML root element which coincides with the browser’s area, thus subtracting it from the normal flow of the document. The element is subsequently positioned on the basis of the value of the coordinates provided through the properties: “top”, “left”, “right” or “bottom”.
The difference with absolute positioning consists in the fact that when the user scrolls the page, the element with fixed positioning does not scroll with it but remains fixed on screen.
After having discussed the theoretical part it is the moment to pass on to practice and see how to implement this property inside our works.
How is fixed positioning used?
As a practical example we will take into consideration a real case applied to the theme of our blog, the fixed positioning of the three icons relative to our Twitter, Facebook accounts and feed subscription.
If you have a video resolution superior to 1024px of width you must have noticed that these three icons – displayed on the external right side of our blog’s container – keep staying in their original position even when the page scrolls down.
<body>
<!-- START SOCIAL FIXED -->
<div class="box-fixed">
<a href="#" title="YIW on Twitter">
<img src="images/bg/fixed/twitterfixed.gif" alt="twitter" />
</a>
<a href="#" title="Become a Fan">
<img src="images/bg/fixed/facebookfixed.gif" alt="facebook" />
</a>
<a href="#" title="subscribe feed">
<img src="images/bg/fixed/rssfixed.gif" alt="rss" />
</a>
</div>
<!-- END SOCIAL FIXED -->
You must be asking yourself at what point of the document is this markup inserted?
We said that the fixed positioning subtracts the content from the normal flow of the document thus it can be inserted at any point because it’s anyway going to be subtracted from the flow of the document and positioned on the screen according to the values subsequently defined with the properties: “top”, “left”, “right” or “bottom”.
For example on the theme of YIW we have added it exactly in the beginning of the document, immediately after the <body> tag.
As you might have noticed in the HTML markup we have assigned a class named “box-fixed” to the section which contains the three images; now let’s see which properties to assign to this class so that the contents of this section can always remain fixed on the screen even when the page is scrolled by the user:
.box-fixed {width:60px;position:fixed;top:370px;right:15px;z-index:0;}
As you can see – by analyzing the line of code provided above -we have assigned a width of 60px to our box and then we have positioned it in fixed mode on the screen bringing it to a distance of 370px from top of the browser window and to 15px from the right side of the browser window.
What’s the z-index property for?
Probably you are asking yourself wondering what’s the “z-index” property for set on zero.
I would like to dedicate an entire article in the future regarding the use of the “z-index” property since it is a very interesting property introduced by the CSS2 specifications: in practice through the use of this property we can have our boxes on more levels – in case the later are found to occupy the same area of the screen – (for those who use photo-retouch programs the functioning is similar to the layers made available by these applicatives) defining the order of overlapping. The elements which are set on a higher value are arranged higher compared to elements which have a minor value.
In our specific case when the user finds himself scrolling the page all the way to the bottom we need to handle the section of the three icons in such a way that it is positioned below the footer layer so that these go under the footer background avoiding to give the unpleasant aesthetic effect of three white squares positioned on a red background. Here’s explained the presence of this property inside our line of code. However, we will resume this argument in a future article in which we will see in depth the use of this property.
Conclusions
We have said – and I repeat it – that the positioning of elements is one of the toughest arguments regarding the CSS, after the use of absolute positioning dealt with in the previous article this week we have examined also the employment of fixed positioning.
As you had the chance to see, once understood the functioning and use of these properties, there’s little left to obtain effects of a remarkable aesthetic impact and what’s more important you no longer have limits in positioning the elements in the desired spots inside your layout.
And to you, has it ever happened to correct or review yourself a particular layout just because you were not able to position certain elements as they were originally designed?
Source : http://www.yourinspirationweb.com/en/css-tips-how-to-use-the-position-fixed-property/
