HTML学习记录

最新推荐文章于 2024-07-17 09:43:10 发布

Sy_planA

最新推荐文章于 2024-07-17 09:43:10 发布

阅读量123

点赞数 2

文章标签： html 学习前端

本文链接：https://blog.csdn.net/Sy_planA/article/details/139710570

版权

HTML元素的位置可以通过CSS的定位属性来控制。定位属性主要有以下几种：

static：静态定位，默认值，没有定位，元素出现在正常的流中。
relative：相对定位，元素相对于其自身的位置进行偏移。
absolute：绝对定位，参照有定位的父盒子进行偏移，如果所有父盒子都没有定位，则参照body；。
fixed：固定定位，元素相对于浏览器窗口进行定位。
sticky：粘性定位，元素在达到一定阈值前为相对定位，之后变为固定定位。

偏移量
       top上、bottom下、left左、right右
       相对定位的盒子不脱标，绝对定位的盒子会脱离标准流。
       布局的时候的准则：大相小绝/子绝父相

示例代码实现：

html<!DOCTYPE html>
<html>
<head>
<style>
.relative {
position: relative;
left: 30px;
top: 20px;
}

.absolute {
position: absolute;
right: 30px;
bottom: 20px;
}

.fixed {
position: fixed;
left: 50px;
top: 50px;
}

.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0; /* 设置触发粘性定位的距离 */
background-color: yellow;
border: 2px solid black;
padding: 5px;
font-size: 20px;
}
</style>
</head>
<body>

<p>默认文档流中的一个段落。</p>

<div class="relative">相对定位元素</div>

<div class="absolute">绝对定位元素</div>

<div class="fixed">固定定位元素</div>

<p class="sticky">粘性定位元素</p>

</body>
</html>

注意：

在这个例子中，.relative类使得元素相对于其正常位置移动；.absolute类使得元素相对于最近的父容器移动；.fixed类使得元素相对于浏览器窗口移动；.sticky类使得元素在滚动到一定位置后变为固定。

Sy_planA

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习记录

绝对定位，参照有定位的父盒子进行偏移，如果所有父盒子都没有定位，则参照body；：粘性定位，元素在达到一定阈值前为相对定位，之后变为固定定位。：静态定位，默认值，没有定位，元素出现在正常的流中。HTML元素的位置可以通过CSS的定位属性来控制。：相对定位，元素相对于其自身的位置进行偏移。：固定定位，元素相对于浏览器窗口进行定位。定位属性主要有以下几种。
复制链接

扫一扫