CSS 如何使用绝对定位将按钮渲染在新的一行上

如果你希望控制一个元素在网页中的定位方式，我们需要使用 position CSS属性。用于定义元素在文档中定位的属性为 top、left、bottom和right属性，而position是一个缩写属性，可以用来同时设置这四个属性。

位置属性position可以使用的值如下：

Static −元素以文档的自然流动方式放置。top、right、bottom、left或z-index属性不会产生任何影响。这是预设选项。
Relative −元素根据文档的自然流动方式放置，并且其自身的偏移量由top、right、bottom和left值决定。页面布局中分配给元素的空间与静态定位相同，因为偏移量对其他元素的位置没有影响。当z-index的值不为auto时，该值将创建一个新的层叠上下文。该值将如何影响table-*-group、row、column、cell和table-caption等元素尚未定义。
Absolute −元素从典型的文档流中被排除，并且在页面布局中不会留出空间。如果有一个祖先元素，则相对于该祖先元素定位；如果没有，则相对于第一个包含块定位。top、right、bottom和left值定义了其最终位置。当z-index的值不为auto时，该值将创建一个新的层叠上下文。绝对定位阻止了盒子边距与其他边距的合并。
Fixed −元素从典型的文档流中被排除，并且在页面布局中不会留出空间。除非其祖先元素中有一个被设置为除none之外的其他值（参见CSS转换规范）的transform、perspective或filter属性，或者will-change属性被设置为transform，否则该元素相对于视口建立的初始包含块定位（注意，不同浏览器之间的perspective和filter差异可能导致产生包围块）。top、right、bottom和left值定义了其最终位置。
Sticky −元素根据文档的自然流动方式放置，并根据top、right、bottom和left值相对于其最近的滚动祖先和包含块（最近的块级祖先），包括表格相关元素进行偏移。其他元素的位置不受偏移的影响。这个值总是会创建一个新的层叠上下文。值得注意的是，sticky元素会“粘附”在最接近的具有“滚动机制”的祖先元素上（当overflow被设置为hidden、scrolled、auto或overlay时产生），即使该祖先元素不是实际上正处于滚动状态的最近的祖先元素。

相对定位和绝对定位的元素

相对定位的元素是指其计算位置为”relative”，而绝对定位的元素是指其计算位置为”absolute”或”fixed”。

相对定位的示例

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

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