深谈relative和absolute。

最新推荐文章于 2022-10-12 14:54:28 发布

回忆伤神

最新推荐文章于 2022-10-12 14:54:28 发布

阅读量352

点赞数

分类专栏： javaweb 文章标签： relative position absolute

本文链接：https://blog.youkuaiyun.com/fmfhjp/article/details/85800669

版权

javaweb 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了CSS中relative和absolute布局的区别，包括它们如何相对于父元素定位，以及在实际应用中的一些常见误区，如absolute定位下float属性的失效和网页居中时的分辨率自适应问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题产生

在使用relative和absolute布局时，我们很难理解他们深层次的区别。

问题详解

relative：

w3c解释：生成相对定位的元素，相对于其正常位置进行定位。

其实是相当于对父容器里的对象进行定位。

注：

1. relative参照父级元素原始点，无父级以body原始点为原始点

2. 父级中有padding，margin等时，原始点参照父级内容区原始点定位

absolute：

w3c解释：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

其实就是相当于对父容器进行定位。

注：

1. 用了abolute属性，原有float属性将失效；

2. 网页居中使用absolute时，容易出错，因为居中时分辨率大小是自适应的，而absolute会以浏览器

左上角为原点，不会因为分辨率变化而变化，很多人在这个问题上出错。

图像说明：

box2使用的是relative，所以box2距box1里面的文字20px；box2使用的是absolute，所以

box2距box1 20px，和里面的文字没有关系。其实这里还有一个问题，当div里面的内容是

非汉字时，里面的内容不会换行，我觉得应该是浏览器把一串英文字符当成一个字符了。

有懂得记得告诉我一下哈。

代码说明

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.s1{
position:relative;
width:100px;
height:70px;
background-color: pink;
}
.s2{
position:relative;
width:100px;
height:70px;
left:50px;
top:20px;
background-color: red;
}
.s3{
position:absolute;
width:100px;
height:70px;
left:50px;
top:20px;
background-color: green;
}
</style>
</head>
<body>
<div class="s1">
这是一个特别大的box1
   <div class="s2">
  这是一个特别大的box2
      <div class="s3">
      这是一个特别大的box3
      </div>
   </div>
</div>
</body>
</html>

参考链接：https://blog.youkuaiyun.com/tto_ott/article/details/41745147