如何将绝对渲染按钮定位在新行中？-css教程-PHP中文网

相对和绝对定位的元素

相对定位示例

Using relative positioning in CSS

绝对定位示例

Example of using absolute positioning

使用绝对定位在新行中渲染按钮

示例

Lorem ipsum dolor sit amet.

结论

首页

web前端

css教程

如何将绝对渲染按钮定位在新行中？

王林

Sep 02, 2023 pm 05:53 PM

如何将绝对渲染按钮定位在新行中？

如果您希望控制元素在网页中的定位方式，我们必须使用 position CSS 属性。定义文档中元素位置的属性是必不可少的，它的 top、left、bottom 和 right 属性和position 是一个简写属性，可用于设置所有这四个属性。

下面指定了我们可以与位置属性一起使用的可能值 -

静态- 元素按照文档的自然流程放置。顶部、右侧、底部、左侧或 z 索引属性没有区别。这是预设选项。
相对- 元素按照文档的自然流放置，其相对自身的偏移量由上、右、下、左的值确定。页面布局中为元素分配的空间与位置为静态时的空间相同，因为偏移量对任何其他元素的位置没有影响。

当 z-index 的值不是 auto 时，该值会建立一个新的堆栈上下文。它如何影响 table-*-group、行、列、单元格和 table-caption 的元素尚未定义。
绝对- 该元素已从典型的文档流中删除，并且页面布局中没有为其留出空间。如果有，则将其与该祖先相关联；如果不是，则将其放置在与第一个包含的块相关的位置。顶部、右侧、底部和左侧值定义其最终位置。

当 z-index 的值不是 auto 时，该值会建立一个新的堆栈上下文。绝对定位可防止框的边距与其他边距重叠。
已修复- 该元素已从典型文档流中删除，并且页面布局中没有为其留出空间。除非它的祖先之一将transform、perspective或filter属性设置为none以外的其他属性（请参阅CSS Transforms Spec），或者将will-change属性设置为transform，在这种情况下，祖先充当包含块，否则它相对于视口建立的初始包含块定位。（请注意，浏览器之间的视角和过滤器差异可能会导致生成封闭块。）顶部、右侧、底部和左侧值定义其最终位置。
Sticky - 元素根据文档的自然流定位，并根据上、右、下和左的值，然后相对于其元素进行偏移最近的滚动祖先和包含的块（最近的块级祖先），包括与表相关的元素。其他元素的位置不受偏移量的影响。

新的堆栈上下文始终由该值创建。应该注意的是，粘性元素“粘”到具有“滚动机制”（当溢出被隐藏、滚动、自动或覆盖时产生）的最近的祖先，即使该祖先不是真正的最近的祖先。滚动。

相对和绝对定位的元素

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

相对定位示例

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

<!DOCTYPE html>
<html>
<head>
   <style>
      .relativePositioning {
         position: relative;
         left: 50px;
         border: 2px solid red;
      }
   </style>
</head>
<body>
   <h2 id="Using-relative-positioning-in-CSS">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 id="Example-of-using-absolute-positioning">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 id="Lorem-ipsum-dolor-sit-amet">Lorem ipsum dolor sit amet.</h5>
      </a>
      <a class="btn-pri btn-pri-2">
         <h5 id="Lorem-ipsum-dolor-sit-amet">Lorem ipsum dolor sit amet.</h5>
      </a>
   </div>
</body>
</html>

登录后复制