CSS 如何在新的一行中绝对渲染按钮的位置

如果你想控制一个元素在网页中的位置，我们必须利用CSS的position属性。定义一个元素在文档中的位置的属性是必不可少的，它的顶部、左侧、底部和右侧属性，而position是一个速记属性，可以用来设置所有这四个属性。

我们可以使用position属性的可能值，具体如下

静态 – 元素是按照文档的自然流程放置的。顶部、右侧、底部、左侧或z-index属性不会产生任何区别。这是预设的选项。
相对 – 元素按照文档的自然流程放置，它与自身的偏移由top、right、bottom和left的值决定。在页面布局中分配给该元素的空间与静态位置相同，因为偏移量对任何其他元素的位置没有影响。

当z-index的值不是自动时，这个值会建立一个新的堆叠环境。它将如何影响table-*-group、row、column、cell和table-caption的元素，仍然没有定义。

Absolute – 该元素被从典型的文档流程中剔除，在页面布局中没有为它留出空间。如果有的话，它被放置在与该祖先的关系上；如果没有，它被放置在与第一个包含的块的关系上。顶部、右侧、底部和左侧的值定义了它的最终位置。

当z-index的值不是自动时，这个值会建立一个新的堆叠环境。绝对定位可以防止方框的边距与其他边距折叠。

固定– 该元素被从典型的文档流程中剔除，在页面布局中没有为它留出空间。除非它的一个祖先的变换、透视或过滤属性被设置为无（见CSS变换规范）或将改变属性设置为变换，在这种情况下，该祖先作为包含块，它被定位在相对于视口建立的初始包含块。(请注意，浏览器之间的视角和过滤器的差异可能会导致包围块的产生）。顶部、右侧、底部和左侧的值定义了它的最终位置。
Sticky – 元素按照文档的自然流程定位，根据top、right、bottom和left的值，它将相对于它最近的滚动祖先和包含的块（最近的块级祖先）进行偏移，包括与表格相关的元素。其他元素的位置不受偏移的影响。

一个新的堆叠环境总是由这个值创建的。应该注意的是，一个粘性元素 “粘 “在有 “滚动机制 “的最近的祖先上（当溢出被隐藏、滚动、自动或叠加时产生），即使该祖先不是真正滚动的最近的祖先。

相对和绝对定位的元素

相对定位的元素是以 “相对 “作为其计算位置的元素，而绝对定位的元素是以 “绝对 “或 “固定 “作为其计算位置的元素。

相对定位的例子

下面是一个使用相对定位的示例代码。

<!DOCTYPE html>
<html>
<head>
   <style>
      .relativePositioning {
         position: relative;
         left: 50px;
         border: 2px solid red;
      }
   </style>
</head>
<body>
   <h2>Using relative positioning in CSS</h2>
   <p>This is a sample paragraph onto which relative positioning is being applied.</p>
   <div class="relativePositioning">This part of the content has position : relative</div>
</body>
</html>

绝对定位的例子

下面是一个使用绝对定位的示例代码。

<!DOCTYPE html>
<html>
<head>
   <style>
      .relativePositioning {
         position: relative;
         width: 500px;
         height: 250px;
         border: 2px solid red;
      }
      .absolutePositioning {
         position: absolute;
         top: 100px;
         right: 0;
         width: 300px;
         height: 150px;
         border: 2px solid red;
      }
   </style>
</head>
<body>
   <h2>Example of using absolute positioning</h2>
   <p>Lorem ipsum dolor sit amet consectetur   adipisicing elit. Nesciunt, possimus.</p>
   <div class="relativePositioning">
      This is the container element with position : relative
      <div class="absolutePositioning">This is an example of absolute positioning</div>
   </div>
</body>
</html>

使用绝对定位在新行中呈现按钮

现在我们已经了解了定位的工作原理以及如何在CSS中使用绝对定位。我们将运用我们的知识来解决手头的问题。

例子

下面是一个在CSS中使用绝对定位在新行中显示按钮的例子。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
   <style>
      .outerBox {
         position: relative;
      }
      .btn-pri {
         color: #fff;
         padding: 0.5px 7% 0.5px 5px;
         height: 45px;
         display: inline-block;
         cursor: pointer;
         background: green;
         border: 2px solid #ccc;
      }
      .btn-txt {
         margin-top: 6px;
         margin-bottom: 6px;
      }
      .btn-pri-2 {
         position: absolute;
         left: 1px;
         top: 53px;
      }
   </style>
<body>
   <div class="outerBox">
      <a class="btn-pri btn-pri-1">
         <h5 class="btn-txt">Lorem ipsum dolor sit amet.</h5>
      </a>
      <a class="btn-pri btn-pri-2">
         <h5 class="btn-txt">Lorem ipsum dolor sit amet.</h5>
      </a>
   </div>
</body>
</html>

结论

最后，绝对定位元素允许你通过指定按钮在页面上的确切位置，将其呈现在一个新的行中。这可以通过将元素的 “position “属性设置为 “absolute “来实现，然后为top、left、right或bottom属性提供数值，表明你想把它放在什么位置。如果使用得当，绝对定位可以帮助创建整洁的布局，而只需付出最小的努力。