HTML 5

Positioning in Cascading Style Sheets

Positioning

In CSS, positioning is the property that allows you to place an element exactly where you want it in your page.

Elements can be positioned using top, bottom, left and right properties and it will not work until and unless you set these position properties first. It can also be placed behind another or specify what should happen when the content is too big. It also depends on the positioning method you apply and it works accordingly.

The following are the six methods for positioning:

  • Static positioning
  • Fixed positioning
  • Sticky positioning
  • Relative positioning
  • Absolute positioning
  • Inherit positioning




Static positioning

Static positioning is the property that is set as the default value and HTML elements are positioned statically by default. The statically positioned elements are always positioned according to the normal flow of the page. It cannot position any element in any special way.

Statically positioned elements are not affected by top, bottom, left and right properties.

The static elements are said to be “not positioned” and the elements with their position set to anything else are said to be “positioned”.

Syntax 
  1. .static{   
  2. position: static;   
  3. }  
  4.   
  5. div.p2{   
  6. position:static;   
  7. font-family:arial black;  
  8. background-color:lightgreen;  
  9. border: 3px solid #cccccc;} 

Example

In the example given below, we have created two styles in other words one is normal or without static positioning (default) and the other has static positioning.

  1. <html>  
  2. <head>  
  3. <title>Static positioning</title>  
  4. <style>  
  5. div.p1{  
  6. font-family: arial black;  
  7. background-color: lightgreen;  
  8. border: 3px solid #cccccc;}  
  9. div.p2{   
  10. position:static;   
  11. font-family:arial black;  
  12. background-color:lightgreen;  
  13. border: 3px solid #cccccc;}  
  14. </style>  
  15. </head>  
  16. <body>  
  17. <div class="p1"><p>This is without positioning</p></div>  
  18. <br>  
  19. <div class="p2"><p>This is with static positioning</p></div>  
  20. <br>  
  21. <p><mark>You can see that there is no difference in both.</mark></p>  
  22. </body>  
  23. </html> 

Output


In the preceding output you can see that both the styles specified work the same as the default.

Relative positioning

Relative positioning for an element is calculated from the original position in the document. That means the element will move to the left, right, top or bottom. In this way, the elements still obtain a space in the document after it is positioned.

In other words, a relative positioned element is positioned relative to its normal position.

Syntax

  1. .relative{  
  2. position: relative;  
  3. }  
  4.   
  5. div.p1_left{  
  6. position: relative;  
  7. bottom: 10px;  
  8. left: -10px;  
  9. font-family: arial black;  
  10. background-color: lightgreen;}  

Example

  1. <html>  
  2. <head>  
  3. <title>Relative positioning</title>  
  4. <style>  
  5. div.p1_left{  
  6. position: relative;  
  7. bottom: -30px;  
  8. left: -10px;  
  9. font-family: arial black;  
  10. background-color: lightgreen;}  
  11. div.p2_right{  
  12. position: relative;  
  13. left: 10px;  
  14. font-family: arial black;  
  15. background-color: lightgreen;}  
  16. img.image_top{  
  17. position: relative;  
  18. top: 50px;  
  19. right: 100px;  
  20. border: 2px solid #ff0000;}  
  21. </style>  
  22. </head>  
  23. <body bgcolor="lightgrey">  
  24. <div class="p1_left"><p>This paragraph is moved 10px left and 30 pixels bottom relative to its normal position</p></div>  
  25. <br>  
  26. <h3><mark>This heading is without positioning or in normal position</mark></h3>  
  27. <br>  
  28. <div class="p2_right"><p>This paragraph is moved 10px right relative to its normal position</p></div>  
  29. <center><img src="C:\Users\dddd\Pictures\danger.jpg"></img><p><mark>(original position of image)</mark></p></center>  
  30. <br>  
  31. <center><img class="image_top" src="C:\Users\dddd\Pictures\danger.jpg"></img></center>  
  32. <br><br>  
  33. <p><mark>(image moved 100 pixels left from its original right position and 50 pixels bottom from its original top position.)</mark></p>  
  34. </body>  
  35. </html> 

In the preceding example, “left: -10px;”(similar to ”right: 10px;”) subtracts 10 pixels from the element's original left position. “left: 10px;”(similar to ”right: -10px;”) adds 10 pixels from the element's original left position. “right: 100px;”(similar to “left: -100px;”) adds 100 pixels from the element's original right position. “top: 50px;”(similar to “bottom: -50px;”) adds 50 pixels from the element's original top position and similarly “bottom: -30px;”(similar to “top: -30px;”) subtracts 30 pixels from the element's original bottom position.

Output



In the preceding example, you can see the positions of the elements that are changed due to relative positioning.

Fixed positioning

In fixed positioning, the elements are fixed in position according to the view port or browser window which means the elements always stay on the same page even if the page is scrolled further. A fixed element does not leave a gap in the page where it would have been located. Fixed positioned elements can overlap other elements.

Fixed positioned elements are removed from the normal flow of the page. The document and other elements behave like fixed positioned elements do not exist.

Syntax

  1. .fixed{  
  2. Position: fixed;  
  3. }  
  4.   
  5. div.fixed{  
  6. position: fixed;  
  7. top: 0;  
  8. left: 0;  
  9. background-color: white;  
  10. border: 2px solid #ff0000;  
  11. width: 250px;} 

Example

  1. <html>  
  2. <head>  
  3. <title>Fixed positioning</title>  
  4. <style>  
  5. div.fixed{  
  6. position: fixed;  
  7. top: 0;  
  8. left: 0;  
  9. background-color: white;  
  10. border: 2px solid #ff0000;  
  11. width: 250px;}  
  12. </style>  
  13. </head>  
  14. <body bgcolor="lightgrey">  
  15. <div class="fixed">  
  16. <img src="C:\Users\dddd\Pictures\fixed.jpg"></img>  
  17. <p><b>Hi..!!<br>I am fixed</b></p>  
  18. </div>  
  19. <div>  
  20. <center><p>The fixed elements are positioned according to the view port or browser window which means the elements always stay on the same page even if the page is scrolled further.<br> A fixed element does not leave a gap in the page where it would have been located.<br> Fixed positioned elements can overlap other elements.<br>  
  21. Fixed positioned elements are removed from the normal flow of the page.<br> The document and other elements behave like fixed positioned elements do not exit.<br></p></center>  
  22. <center><img src="C:\Users\dddd\Pictures\fixed11.png"></img></center>  
  23. <center><p><b>The fixed elements are positioned according to the view port or browser window which means the elements always stay on the same page even if the page is scrolled further.<br> A fixed element does not leave a gap in the page where it would have been located.<br> Fixed positioned elements can overlap other elements.<br>  
  24. Fixed positioned elements are removed from the normal flow of the page.<br> The document and other elements behave like fixed positioned elements do not exit.<br></b></p></center>  
  25. <center><img src="C:\Users\dddd\Pictures\fixed12.jpg"></img></center>  
  26. <center><h1> The fixed element is remains at its palce</h1></center>  
  27. </body>  
  28. </html> 

Output



In the output you can see the fixed element that will not move from its place even when we scroll the page.

Let's see what happens after scrolling the page.

Output



In the preceding example, you can see that the fixed positioned element remains at its place even after scrolling the page further.

Absolute Positioning

An absolute position element is positioned relative to the first ancestor (parent) element that has a position other than static. If no such element is found then it uses the document body and still moves with the page scrolling.

Absolute positioned elements are removed from the normal flow of the page. The document and other elements behave like absolute positioned elements do not exist. Absolute positioned elements can overlap other elements.

Syntax

  1. div.relative{  
  2. position: relative;  
  3. top: 10px;  
  4. left: 10px;  
  5. width: 700px;  
  6. height: 400px;}  
  7. div.absolute{  
  8. position: absolute;  
  9. top: 150px;  
  10. left: 420px;  
  11. width: 300px;  
  12. height: 150px;} 

Example

  1. <html>  
  2. <head>  
  3. <title>Fixed positioning</title>  
  4. <style>  
  5. div.fixed{  
  6. position: fixed;  
  7. top: 0;  
  8. left: 0;  
  9. background-color: white;  
  10. border: 2px solid #ff0000;  
  11. width: 250px;}  
  12. </style>  
  13. </head>  
  14. <body bgcolor="lightgrey">  
  15. <div class="fixed">  
  16. <img src="C:\Users\dddd\Pictures\fixed.jpg"></img>  
  17. <p><b>Hi..!!<br>I am fixed</b></p>  
  18. </div>  
  19. <div>  
  20. <center><p>The fixed elements are positioned according to the view port or browser window which means the elements always stay on the same page even if the page is scrolled further.<br> A fixed element does not leave a gap in the page where it would have been located.<br> Fixed positioned elements can overlap other elements.<br>  
  21. Fixed positioned elements are removed from the normal flow of the page.<br> The document and other elements behave like fixed positioned elements do not exit.<br></p></center>  
  22. <center><img src="C:\Users\dddd\Pictures\fixed11.png"></img></center>  
  23. <center><p><b>The fixed elements are positioned according to the view port or browser window which means the elements always stay on the same page even if the page is scrolled further.<br> A fixed element does not leave a gap in the page where it would have been located.<br> Fixed positioned elements can overlap other elements.<br>  
  24. Fixed positioned elements are removed from the normal flow of the page.<br> The document and other elements behave like fixed positioned elements do not exit.<br></b></p></center>  
  25. <center><img src="C:\Users\dddd\Pictures\fixed12.jpg"></img></center>  
  26. <center><h1> The fixed element is remains at its palce</h1></center>  
  27. </body>  
  28. </html> 

Output



Sticky positioning

Sticky positioning is the hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a threshold value at which it is then treated as fixed positioned.

Syntax 
  1. #sticky{  
  2. position: sticky;  
  3. top: 10px;  
  4. } 

The preceding style will behave like a relative positioned element until the viewport scrolls such that the element would be less than 10px from the top. Then, it will be fixed to 10px from the top until the viewport scrolls back past this threshold value.

This positioning is generally used for the headings in an alphabetized listing where a “B” heading will appear just below the items that begin with “A” until they are scrolled further and similarly for “C” and so on.

For this type of positioning there is a need for some JavaScript code also to make it work as expected.

Example

  1. <html>  
  2. <head>  
  3. <title>Sticky positioning</title>  
  4. <style>  
  5.   body {  
  6.     margin: 0;  
  7.     text-align: center;  
  8.     font-family: sans-serif;  
  9.   }  
  10.   .fixed {  
  11.     position: fixed;  
  12.     top: 0;  
  13.   }  
  14.   .sticky {  
  15.     width: 100%;  
  16.     background: #F6D565;  
  17.     padding: 25px 0;  
  18.     text-transform: uppercase;  
  19.   }  
  20. </style>  
  21.   
  22. <p style="margin-bottom:100px;">Scroll this page.</p>  
  23. <div class="sticky"><h3>Super amazing header</h3></div>  
  24. <p style="margin-top:300px;">Scroll more</p>  
  25. <p style="margin-top:300px;">Still there?</p>  
  26. <p style="margin-top:300px;">Yep!</p>  
  27. <p style="margin-top:300px;">Scroll so hard!</p>  
  28. <script>  
  29. var sticky = document.querySelector('.sticky');  
  30. var origOffsetY = sticky.offsetTop;  
  31.   
  32. function onScroll(e) {  
  33.   window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :  
  34.                                   sticky.classList.remove('fixed');  
  35. }  
  36.   
  37. document.addEventListener('scroll', onScroll);  
  38. </script>  
  39. </head>  
  40. <body bgcolor="lightgrey">  
  41. </body>  
  42. </html> 

Output



In the preceding output, you can see the orange header that is sticky positioned and it will stick to the top after scrolling and other content of the page will move on further scrolling. Hence the output:



You can see that the header stuck to the top and it will return to its position if the page is scrolled back up

Inherit positioning

In this positioning, the elements inherit the values of their parent elements. Basically, the position properties do not inherit the parent's values; a static value is assigned if there is no position value given. You can type inherit or parent's element value and get the same result.

Example

  1. <html>  
  2. <head>  
  3. <title>Inherit positioning</title>  
  4. <style>  
  5. .parent {  
  6.   background-color: white;  
  7.   color: black;  
  8. }  
  9.   
  10. .borrow {  
  11.   background-color: inherit;  
  12.   color: inherit;  
  13.   font-weight: normal;  
  14. }  
  15. .par {  
  16.   background-color: #32cd32;  
  17.   color: black;  
  18. }  
  19.   
  20. .bor {  
  21.   background-color: inherit;  
  22.   color: inherit;  
  23.   font-weight: normal;  
  24. </style>  
  25. </head>  
  26. <body bgcolor="lightgrey">  
  27. <div class="parent">  
  28.   <p class="borrow">  
  29.     In this paragraph, class-"borrrow" inherits the value (background-color: white) of its parent class-"parent".   
  30.   </p>  
  31. </div>  
  32. <div class="par">  
  33.   <p class="bor">  
  34.     In this paragraph also, class-"bor" inherits the value (background-color: #32cd32) of its parent class-"par".   
  35.   </p>  
  36. </div>  
  37. </body>  
  38. </html> 

Output



Overlapping elements

When elements are positioned outside the normal flow of the page then they can overlap other elements. The z-index property specifies the stack order of the element (which element should be placed in front of, or behind the others). An element may have a positive and negative stack order and an element with greater stack order is always in front of an element with lower stack order.

If two positioned elements overlap without a z-index specified then the element positioned last in HTML code will be shown on top.

Example

  1. <html>  
  2. <head>  
  3. <title>Overlapping elements</titlea>  
  4. <style>  
  5. img {  
  6.     position: absolute;  
  7.     left: 0px;  
  8.     top: 0px;  
  9.     z-index: -1;  
  10. }  
  11. </style>  
  12. </head>  
  13. <body>  
  14.   
  15. <h1>This is a heading</h1>  
  16. <img src="C:\Users\dddd\Pictures\safe_image.jpg" width="200" height="140">  
  17. <p><font color="red"><b>Because the image has a z-index of -1, it will be placed behind the text.</b></font></p>  
  18.   
  19. </body>  
  20. </html> 

Output


Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs