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

Javascript Object Oriented Programming Front End Technology

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>

Govinda Sai

Published on 27-Feb-2018 06:09:08

Previous Page Print Page