Fixed position

Place the element at fixed place relative to the viewport. Page scrolling will not affect this position.

Example:

div.divFixed
 {
      position:fixed;
      left:10px;
      top:10px;
      width:100%;
      border-style:dashed;
   }

Example: Set heading element positon to ‘fixed’.

<!DOCTYPE html>

<html>
<head>
    <title>CSS Fixed Position</title>
    <style>
        .divChild {
            width: 400px;
            height: 100px;
            border: solid;
            position:relative;
        }

        #divHeading {
            border: 2px solid red;
            font-size:x-large;
            position:fixed;
            left:500px;
        }


       #divParent {
            position:relative;
            top:100px;
        }


    </style>
</head>
<body>

    <div id="divHeading">This is Heading</div>

    <div id="divParent">
        <div class="divChild">Child1</div>
        <div class="divChild">Child2</div>
        <div class="divChild">Child3</div>
    </div>


</body>
</html>

Result:

In the above example,

Fixed position is applied to the first DIV element (#divHeading)
When page scroll happens, first DIV element position doesn’t change.
Note: Resize (reduce height) the browser window to see the result well.