css position使用

最新推荐文章于 2024-10-06 23:37:55 发布

蓝朽

最新推荐文章于 2024-10-06 23:37:55 发布

阅读量119

点赞数

分类专栏：前端相关文章标签： css html css3

本文链接：https://blog.csdn.net/lx00000025/article/details/129879826

版权

前端相关专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章介绍了CSS中position属性的作用，包括absolute和relative两种定位方式的使用。absolute定位使元素脱离文档流并根据最近的定位父元素定位，而relative定位则保持元素在文档流中的位置并相对于自身进行偏移。通过示例代码和效果展示了两者的区别。

摘要由CSDN通过智能技术生成

一、position的作用

作用：position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
属性值：

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative：生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

这里就举两个常用的属性。

1.absolute属性使用

通过absolute属性可以将你想移动的元素移动到页面的任何位置
示例代码：
css代码


.continer1{
    position: absolute;
    top: 60px;
    left: 500px;
}
.continer1{
    height: 100px;
    width: 100px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    top: 100px;
    left: 100px;
    margin: 100px;
}
.continer2{
    height: 100px;
    width: 100px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 100px;
    left: 150px;
    margin: 100px;
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/test.css">
</head>
<body>
    <div class="continer">
    <div class="continer1"></div>
    <div class="continer2"></div>
    </div>  
</body>
</html>

效果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/18ef0bbcefd24b41a8f872a1c81f3195.png
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

2.relative属性使用

相对定位元素经常被用来作为绝对定位元素的容器块。
css代码：

.test1{
    background-color: yellow;
    position: relative;
    font-size: 50px;
}
.test2{
    background-color: blue;
    position: relative;
    left: 50px;
    font-size: 50px;
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/test.css">
</head>
<body>
       <div class="test1">这是正常位置</div>
       <div class="test2">相对于正常位置向右移动</div>
</body>
</html>

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

3.absolute和relative的区别

定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在

在这里插入图片描述
黄色背景的层定位为relative，红色边框区域为其在正常流中的位置。在通过top、left对其定位后，从灰色背景层的位置可以看出其正常位置依然存在。

定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。

在这里插入图片描述
可以看到，在将黄色背景层定位为absolute后，灰色背景层自动补上。

主要区别：relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式
在这里插入图片描述
图中，红色背景层为relative定位，其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute，则情形如图：

可以看到，红色背景层依然定义top:20px；left:20px；但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此，对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位，如图：
在这里插入图片描述