CSS的使用——定位（position）

最新推荐文章于 2024-05-31 14:44:29 发布

程序员阿皓

最新推荐文章于 2024-05-31 14:44:29 发布

阅读量242

点赞数 4

分类专栏： # CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/2401_82884096/article/details/136846917

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS中的定位属性用于指定元素在页面中的位置。常见的定位属性有： static 、 relative 、 absolute 和 fixed 。

一、定位属性值

static ：默认定位属性，元素按照文档流进行排列。
relative ：相对定位，元素相对于其正常位置进行偏移，但仍保持文档流中的空间。
absolute ：绝对定位，元素相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于最初的包含块进行定位。
fixed ：固定定位，元素相对于浏览器窗口进行定位，即使页面滚动，元素位置也不会改变。

二、定位的使用

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
.relative {
  position: relative;
  top: 30px;
  left: 50px;
  background-color: lightblue;
}

.absolute {
  position: absolute;
  top: 100px;
  left: 100px;
  background-color: lightcoral;
}

.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: lightgreen;
}
</style>
</head>
<body>

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

<div style="height: 1000px;">
  <div class="absolute">绝对定位元素</div>
</div>

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

</body>
</html>