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

Javascript 面向对象编程前端技术

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

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

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

使用 Style position 属性

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

可用的 position 值为相对（relative）、绝对（absolute）、固定（fixed）、粘性（sticky）和静态（static）。

静态定位（static）是 JavaScript 中可用的默认 position 值。具有 static 定位的元素遵循文档顺序。

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

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

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

粘性元素根据滚动位置的行为类似于相对固定的元素。在我们在视口中设置偏移位置之前，它保持相对状态。然后它像固定元素一样“粘住”。

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

我们必须指定元素的顶部（top）、右侧（right）、底部（bottom）或左侧（left）属性才能根据需要对其进行定位。

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

语法

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

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

参数

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

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


<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

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


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

在本教程中，我们学习了 JavaScript 中的 position 属性，以设置元素的定位方法类型。

实现非常简单，因为它是在 JavaScript 中的内置属性。

Shubham Vora

更新于： 2022年10月25日

188 次查看

开启你的职业生涯

通过完成课程获得认证

开始学习