CSS 布局 - position 属性

最新推荐文章于 2023-03-14 16:07:51 发布

佛佛佛系06

最新推荐文章于 2023-03-14 16:07:51 发布

阅读量257

点赞数 2

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_67014537/article/details/125711861

版权

position属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute）。

position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

static
relative
fixed
absolute

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同

position: static（静态定位）;

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位

position: relative（相对定位）;

position: relative；的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
例如：

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h1>position: relative;</h1>
<div class="relative">
这个 div 元素设置 position: relative;
</div>

</body>
</html>

效果为
在这里插入图片描述

position: absolute（绝对定位）;

position: absolute; 的元素相对于最近的定位父级元素进行定位
然而，如果绝对定位的元素没有父级，它将使用文档主体（body），并随页面滚动一起移动。

例如：

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h1>position: absolute;</h1>
<div class="relative">这个 div 元素设置 position: relative;
  <div class="absolute">这个 div 元素设置 position: absolute;</div>
</div>

</body>
</html>

效果如下

在这里插入图片描述

position: fixed（固定定位）;

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
固定定位的元素不会在页面中通常应放置的位置上留出空隙。

例如：

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h1>position: fixed;</h1>
<div class="fixed">
这个 div 元素设置 position: fixed;
</div>
</body>
</html>

效果如下

在这里插入图片描述
右下角模块不会随着页面滚动、放大或缩小而移动，始终固定在右下角，但会随着页面放大缩小而产生对应的变化。

佛佛佛系06

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 布局 - position 属性

position属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute）。position 属性规定应用于元素的定位方法的类型。有五个不同的位置值：元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同HTML 元素默认情况下的定位方式为 static（静态）。静态定位的元素不受 top、bottom、left 和 rig
复制链接

扫一扫