数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在新的行中绝对定位渲染按钮？
如果您希望控制元素在网页中的定位方式，则必须使用position CSS 属性。定义文档中元素位置的属性至关重要，包括其 top、left、bottom 和 right 属性，而 position 则是一个简写属性，可用于设置所有这四个属性。
我们可以在 position 属性中使用的可能值如下所示：
static - 元素根据文档的自然流程放置。top、right、bottom、left 或 z-index 属性不会产生任何差异。这是预设选项。
relative - 元素根据文档的自然流程放置，其相对于自身的偏移量由 top、right、bottom 和 left 的值决定。页面布局中分配给元素的空间与其 position 为 static 时相同，因为偏移量不会影响任何其他元素的位置。
当 z-index 的值不是 auto 时，此值将建立一个新的堆叠上下文。它将如何影响 table-*-group、row、column、cell 和 table-caption 的元素尚未定义。
absolute - 元素从正常的文档流中移除，页面布局中不会为其保留空间。如果存在祖先元素，则相对于该祖先元素定位；否则，相对于第一个包含块定位。top、right、bottom 和 left 值定义其最终位置。
当 z-index 的值不是 auto 时，此值将建立一个新的堆叠上下文。绝对定位可以防止盒子边距与其他边距折叠。
fixed - 元素从正常的文档流中移除，页面布局中不会为其保留空间。除非其祖先元素之一的 transform、perspective 或 filter 属性设置为非 none（参见 CSS 变换规范）或 will-change 属性设置为 transform，在这种情况下，该祖先元素充当包含块，否则它相对于视口建立的初始包含块定位。（请注意，浏览器之间的 perspective 和 filter 差异可能会导致生成封闭块。）top、right、bottom 和 left 值定义其最终位置。
sticky - 元素根据文档的自然流程放置，然后根据 top、right、bottom 和 left 的值，相对于其最近的滚动祖先和包含块（最近的块级祖先）进行偏移，包括与表格相关的元素。其他元素的位置不受偏移量的影响。
此值始终创建一个新的堆叠上下文。需要注意的是，粘性元素会“粘贴”到具有“滚动机制”的最近祖先（当 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>
结论
总而言之，绝对定位元素允许您通过指定其在页面上的确切位置来在新行中渲染按钮。这可以通过将元素的“position”属性设置为“absolute”，然后提供 top、left、right 或 bottom 属性的值来指示您要将它放置的确切位置来实现。如果使用正确，绝对定位可以帮助轻松创建整洁的布局。
1K+ 次浏览
