如何使用 JavaScript 设置元素使用的定位方法类型?

javascriptobject oriented programmingfront end technology更新于 2024/6/10 17:48:17

在本教程中，我们将学习使用 JavaScript 设置元素使用的定位方法类型。

定位允许我们将元素移出实际文档顺序，并使它们以各种方式显示。例如，保持在彼此之上或占据浏览器视口内的初始位置。

让我们了解如何设置定位方法的类型。

使用 Style 位置属性

使用 Style"position"属性，我们可以设置或返回元素使用的定位方法类型。

可用的位置值为相对、绝对、固定、粘性和静态

静态位置是 JavaScript 中可用的默认位置值。位置为 static 的元素遵循文档顺序。

相对定位将元素设置为相对于其正常位置。其他内容不会填充具有相对位置的元素创建的任何空间。

固定定位将元素设置为相对于视口的位置。即使我们滚动页面，它始终保持在初始位置。固定元素不会像相对元素那样在页面上留下空间。

绝对定位将元素设置为相对于最近的祖先。如果具有绝对位置的元素没有祖先，它会查找文档主体并跟随页面滚动。具有绝对位置的元素没有正常流，它们与其他元素重叠。

粘性元素的行为类似于基于滚动位置的相对固定元素。它保持相对，直到我们在视口中设置偏移位置。然后它像固定元素一样"粘住"。

Internet Explorer 不支持粘性定位方法。 Safari 需要 -WebKit-position。

我们必须指定元素的 top、right、bottom 或 left 属性，以便根据需要定位它。

用户可以按照以下语法使用 position 属性。

语法

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

上述语法将所需的位置类型设置为元素的样式。

参数

static − 元素遵循文档流。
absolute − 元素相对于其第一个非静态祖先元素。
fixed − 元素相对于浏览器窗口。
relative − 元素相对于其实际位置。
sticky − 元素根据滚动位置显示。
initial − 将此属性设置为其默认值。
inherit − 从其父元素继承此属性。

此属性的默认值为 static。返回值是一个字符串，表示元素使用的定位方法类型。

示例 1

在下面的示例中，我们使用 position 属性设置位置。您可以尝试运行以下代码，使用 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>

示例 2

在这里，我们为不同的元素设置了多种位置类型。当用户按下按钮时，我们调用函数来使用上面给出的语法设置位置类型。


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

示例 3

在此程序中，我们为元素设置相对位置类型。当用户按下按钮时，我们调用函数来使用上面给出的语法设置位置类型。


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