Computer >> Computer tutorials >  >> Programming >> Javascript

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


To set the position, use the position property in JavaScript. You can try to run the following code to set the type of positioning method used for an element with JavaScript −

Example

<!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>