1. home
  2. Tutorials
  3. Tutorial
Edit

Fixed Positioning

Fixed positioning is a subcategory of absolute positioning. Fixed positioned element doesn't move with scroll it is always fixed with respect to the browser's viewport.

Example of Code

<style type="text/css">
    .example-absolute {
    position: absolute;
    top: 500px;
    left: 60px;
    height: 2000px;
    background-color: limegreen;
  }
  .example-fixed {
    position: fixed;
    top: 10px;
    left: 10px;
    background-color: gold;
    width: 90px;
    padding: 20px;
  }
</style>
<body>
    <div class="example-absolute">
    This tall div is absolutely positioned 500 pixels from the top and 60 pixels from the left of its containing block.
    </div>
    <div class="example-fixed">
      This div is using a fixed position of 100 pixels from the top and 60 pixels from the left of its containing block. When this page scrolls, this box will remain in a fixed position - it won't scroll with the rest of the page. Go on - SCROLL!
    </div>
</body>

Output

   
    This tall div is absolutely positioned 500 pixels from the top and 60 pixels from the left of its containing block.   
   
      This div is using a fixed position of 100 pixels from the top and 60 pixels from the left of its containing block. When this page scrolls, this box will remain in a fixed position - it won't scroll with the rest of the page. Go on - SCROLL!