How to set the type of positioning method used for an element with JavaScript?

Javascript Object Oriented Programming Front End Technology

In this tutorial, we shall learn to set the type of positioning method used for an element with JavaScript.

The positioning permits us to move elements out of actual document order and make them appear in various ways. For instance, stay on top of one another or occupy the initial position within the browser viewport.

Let us understand how to set the type of positioning method.

Using the Style position Property

With the Style "position" property, we can set or return the type of positioning method used for an element.

The available position values are relative, absolute, fixed, sticky, and static.

The static position is the default position value available in JavaScript. The elements with position static follow the document order.

The relative positioning sets the element relative to its normal position. Other contents do not fill any space that the element with position relative creates.

The fixed positioning sets the element position relative to the viewport. It always remains in the initial location even when we scroll the page. A fixed element does not leave a space on the page like a relative element.

The absolute positioning sets the element relative to the closest ancestor. If an element with position absolute has no ancestors, it looks for the document body and follows the page scroll. An element with position absolute has no normal flow, and they overlap with other elements.

A sticky element behaves like a relatively fixed element based on the scroll position. It stays relative until we set an offset position in the viewport. Then it "sticks" like a fixed element.

Internet Explorer does not support the sticky positioning method. Safari needs a -WebKit-position.

We must specify the element's top, right, bottom, or left properties to position it as we need.

Users can follow the syntax below for using the position property.

Syntax

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit";

The above syntax sets the required type of position to the element's style.

Parameters

static − The element follows the document flow.
absolute − The element is relative to its first non-static ancestor element.
fixed − The element is relative to the browser window.
relative − The element is relative to its actual position.
sticky − The element appears based on the scroll position.
initial − Sets this property to its default value.
inherit − Inherits this property from its parent element.

The default value of this property is static. The return value is a string representing the type of positioning method used for the element.

Example 1

In the below example, we set the position using the position property. You can try to run the following code to set the type of positioning method used for an element with JavaScript −


<!DOCTYPE html>
<html>
<head>
   <style>
      #box {
         width: 350px;
         height: 200px;
         background-color: orange;
         border: 3px solid red;
         position: relative;
         top: 20px;
      }
   </style>
</head>
<body>
   <p>Click to set the type of positioning method using position
   property.</p>
   <button type = "button" onclick = "display()">Set Position</button>
   <div id = "box">
      <p>This is a div. This is a div. This is a div. This is a div.
      This is a div.<p>
      <p>This is a div. This is a div. This is a div. This is a div.
      This is a div.<p>
      <p>This is a div. This is a div. This is a div. This is a div.
      This is a div.<p>
   </div>
   <br>
   <br>
   <script>
      function display() {
         document.getElementById("box").style.position = "absolute";
      }
   </script>
</body>
</html>

Example 2

Here, we set multiple position types to different elements. When the user presses the button, we call the function to set the position type with the syntax given above.


<html>
<head>
   <style>
   #parent2{
      border:2px solid #9370DB;
      color:#A9A9A9;
      padding:20px;
   }
   #element2{
      border:1px dotted #BDB76B;
      background-color:#C71585;
      padding:20px;
      color:#DAA520;
   }
   #parent3{
      color:#FFFFFF;
      padding:50px;
      background-color:#191970;
      margin-top:50px;
   }
   #element3{
      background-color:#20B2AA;
      padding:20px;
      color:#000;
      bottom:0;
      left:0;
      right:0;
   }
   .p3{
      margin:0 auto;
      max-width:600px;
      margin-top:40px;
      line-height:1.5;
      height:500px;
   }
   nav{
      background:#3CB371;
      padding:0.15em 0;
      width:100%;
   }
   nav ul{
      display:flex;
   }
   nav ul li{
      margin-left:2.5em;
   }
   nav ul li a{
      color:#fff;
      text-decoration:none;
   }
   nav#nav-sticky{
      top:0px;
   }
   header{
      background:purple;
      color:#fff;
      display:flex;
      min-height:250px;
      justify-content:center;
      align-items:center;
   }
   header h1{
      font-size:3.5em;
   }
   article{
      line-height:1.5em;
      margin-left:auto;
      margin-right:auto;
      max-width:50rem;
      padding-left:5%;
      padding-right:5%;
   }
   article h1{
      padding-top:75px;
   }
   #posTypMultWrap2,
   #posTypMultWrap3,
   #posTypMultWrap4{
      display:none;
   }
   #posTypMultBtnWrap{
      float:left;
   }
   </style>
</head>
<body>
   <h2> Set the position type of multiple elements using
      the <i> position </i> property.
   </h2>
   <div id = "posTypMultWrap2">
      <b>Position type - absolute</b>
      <div id = "parent2">Parent
         <div id = "element2"> Child </div>
      </div>
      <br><br>
   </div>
   <div id = "posTypMultWrap3">
      <b> Position type - fixed</b>
      <div id = "parent3">Parent
         <div id = "element3">Child</div>
      </div>
      <p class = "p3">
      </p>
   </div>
   <div id = "posTypMultWrap4">
      <b>Position type - sticky</b>
      <nav class = "nav-main">
         <ul>
            <li>
               <a>Block1</a>
            </li>
            <li>
               <a>Block2</a>
            </li>
            <li>
               <a>Block3</a>
            </li>
         </ul>
      </nav>
      <header>
         <h1>Block1</h1>
      </header>
      <nav id="nav-sticky">
         <ul>
            <li>
               <a>Set1</a>
            </li>
            <li>
               <a>Set2</a>
            </li>
            <li>
               <a>Set3</a>
            </li>
         </ul>
      </nav>
      <article>
         <h1>Data</h1>
         <p style="height: 1500px;">
         </p>
      </article>
   </div>
   <div id="posTypMultBtnWrap">
      <p>Click on the buttons to set different position types.</p>
      <button onclick="setMultPosType(2);">Absolute</button>
      <button onclick="setMultPosType(3);">Fixed</button>
      <button onclick="setMultPosType(4);">Sticky</button>
   </div>
</body>
<script>
   function setMultPosType(type){
      var posTypMultBtnWrap =
      document.getElementById("posTypMultBtnWrap");
      var posTypMultEl2 = document.getElementById("posTypMultWrap2");
      var posTypMultEl3 = document.getElementById("posTypMultWrap3");
      var posTypMultEl4 = document.getElementById("posTypMultWrap4");
      var posEl2 = document.getElementById("element2");
      var posEl3 = document.getElementById("element3");
      var parEl3 = document.getElementById("parent3");
      var posEl4 = document.getElementById("nav-sticky");
      if(type == 2){
         posEl2.style.position = "absolute";
         posTypMultEl2.style.display = "block";
      }
      else if(type == 3){
         parEl3.style.position = "relative";
         posEl3.style.position = "fixed";
         posTypMultEl3.style.display = "block";
      }
      else{
         posEl4.style.position = "sticky";
         posEl4.style.position = "-webkit-sticky";
         posTypMultEl4.style.display = "block";
      }
   }
</script>
</html>

Example 3

In this program, we set the relative position type to the element. When the user presses button, we call the function to set the position type with the syntax given above.


<html>
<head>
   <style>
      #parent{
         border:2px solid #483D8B;
         color:#5F9EA0;
         padding:20px;
      }
      #element{
         border:1px dotted #2F4F4F;
         background-color:grey;
         padding:20px;
         color:#000;
         margin-top:10px;
         -webkit-animation: push ease 5s alternate infinite;
         animation: push ease 5s alternate infinite;
         -webkit-animation-delay:1.5s;
         animation-delay:1.5s;
      }
      @-webkit-keyframes push{
         0% {
            left:0;
            top:0;
         }
         50% {
            left:-100px;
            top:100px;
         }
         100% {
            top:50px;
            left:50px;
         }
      }
      @keyframes push{
         0% {
            left:0;
            top:0;
         }
         50% {
            left:-100px;
            top:100px;
         }
         100% {
            top:50px;
            left:50px;
         }
      }
      #posTypSimpWrap{
         display:none;
      }
      #posTypSimpBtnWrap{
         float:left;
      }
   </style>
</head>
<body>
   <h2>Set the position type of an element using
      <i> the position property.</i>
   </h2>
   <div id="posTypSimpWrap">
      <b>Relative position</b>
      <div id="parent">Parent
         <div id="element">Child</div>
      </div>
   </div>
   <div id="posTypSimpBtnWrap">
      <p>Click on the button to set position type.</p>
      <button onclick="setPosType();">Set</button>
   </div>
</body>
<script>
   function setPosType(){
      var posTypSimpBtnWrap =
      document.getElementById("posTypSimpBtnWrap");
      posTypSimpBtnWrap.style.display = "none";
      var posTypSimpEl = document.getElementById("posTypSimpWrap");
      var posEl = document.getElementById("element");
      posEl.style.position = "relative";
      posTypSimpEl.style.display = "block";
   }
</script>
</html>