relative和absolute的区别

时间: 2024-01-05 11:05:11 浏览: 82

css的position里的relative和absolute的区别.docx

CSS Position relative 和 absolute 的区别在 CSS 中，position 属性 plays a crucial role 在排版元素中。在 position 属性中，有五个值：static、inherit、fixed、absolute 和 relative。今天，我们将深入探讨 relative 和 absolute 两个值的区别。让我们来看看 W3C 对 absolute 和 relative 的定义： absolute：生成肯定定位的元素，相对于 static 定位以外的第一个父元素举行定位。 relative：生成相对定位的元素，相对于其正常位置举行定位。从定义中，我们可以看到，absolute 和 relative 都是生成定位的元素，但它们的定位方式不同。absolute 是相对于 static 定位以外的第一个父元素举行定位，而 relative 是相对于其正常位置举行定位。那么，什么是 static 定位？在 CSS 中，默认的 position 属性值是 static，即元素浮现在正常的流中（忽视 top, bottom, left, right 或者 z-index 声明）。也就是说，static 定位的元素不受任何定位的影响，元素的位置是根据正常的文档流来决定的。现在，让我们来看看 absolute 和 relative 的实际应用。我们来看一个简单的示例： HTML 代码： ```html <div id="baba"> <p>我是 baba</p> </div> <div id="erzi"> <p>我是 erzi</p> </div> ``` CSS 代码： ```css baba { position: absolute; left: 50px; top: 50px; width: 300px; height: 300px; background: blue; } baba p { background: lightblue; } erzi { position: absolute; left: 50px; top: 50px; width: 200px; height: 200px; background: yellow; } ``` 在上面的代码中，我们定义了两个 div 元素，baba 和 erzi，并将它们的 position 属性设置为 absolute。然后，我们设置了它们的 left 和 top 属性，以便它们能够在屏幕上显示出来。从结果中，我们可以看到，baba 和 erzi 都是绝对定位的元素，它们的位置都是相对于 static 定位以外的第一个父元素举行定位的。但是，erzi 元素的宽度和高度小于 baba 元素，为什么呢？这是因为 absolute 定位的元素不受父元素里的其他元素影响。也就是说，absolute 定位的元素是独立的，它们的位置和尺寸都不受其他元素的影响。现在，让我们来看一个 relative 定位的示例： HTML 代码： ```html <div id="baba"> <p>我是 baba</p> <div id="erzi"> <p>我是 erzi</p> </div> </div> ``` CSS 代码： ```css baba { position: relative; width: 300px; height: 300px; background: blue; } baba p { background: lightblue; } erzi { position: relative; top: 50px; left: 50px; width: 200px; height: 200px; background: yellow; } ``` 在上面的代码中，我们定义了一个 div 元素 baba，并将其 position 属性设置为 relative。然后，我们在 baba 元素内部定义了一个 div 元素 erzi，并将其 position 属性也设置为 relative。从结果中，我们可以看到，erzi 元素的位置是相对于 baba 元素的正常位置举行定位的。这是因为 relative 定位的元素是相对于其正常位置举行定位的。因此，我们可以看到，absolute 和 relative 定位的元素的区别就在于它们的定位方式不同。absolute 定位的元素是相对于 static 定位以外的第一个父元素举行定位的，而 relative 定位的元素是相对于其正常位置举行定位的。在实际应用中，我们可以根据需要选择使用 absolute 或 relative 定位。例如，如果我们想让一个元素固定在屏幕上的某个位置，可以使用 absolute 定位。如果我们想让一个元素相对于其父元素进行定位，可以使用 relative 定位。 absolute 和 relative 是两个重要的 position 属性值，它们的区别就在于它们的定位方式不同。理解这两者的区别是非常重要的，因为它可以帮助我们更好地控制元素的排版和定位。

相对定位（relative）和绝对定位（absolute）是用于 CSS 的两种定位方式。相对定位是相对于元素自身的位置进行定位，而绝对定位是相对于其父元素进行定位。具体而言，相对定位是通过设置元素的 top、bottom、left、right 属性的值来进行定位的，而绝对定位则是通过设置元素的 position 属性为 absolute 并设置其 top、bottom、left、right 属性的值来进行定位的。相对定位的元素会保留其在文档流中的位置，并且其定位不会影响其他元素的位置。而绝对定位的元素则会脱离文档流，不再占据任何空间。

阅读全文

relative和absolute的区别

相关推荐

HTML层叠技巧：position、absolute、relative解析

CSS position属性详解：absolute, relative, static, fixed

relative和absolute区别

区别div和span、relative和absolute、display和visibility

position的relative和absolute总结

css的position里的relative和absolute的区别.docx

position relative 跟absolute区别

static,relative和absolute的区别

HTML的relative与absolute使用及区别详解

position:relative/absolute无法冲破的等级

CSS定位详解：static, relative, absolute

CSS position属性详解：relative, absolute, fixed

relative与absolute如何使用

absolute和relative的区别

请谈谈css中使用position时，relative和absolute分别是相对于谁定位的

Web网站设计利用relative，absolute布局

static | relative | absolute | sticky | fixed

CSS定位深度解析：relative, absolute, fixed

【java毕业设计】智慧社区教育服务门户.zip

最新推荐

css中position:relative和overflow:hidden之间的问题

【java毕业设计】智慧社区教育服务门户.zip

基于selenium的携程机票爬虫资料齐全+详细文档+高分项目+源码.zip

【java毕业设计】智慧社区宠物管理系统（源代码+论文+PPT模板）.zip

JavaScript实现的高效pomodoro时钟教程

管理建模和仿真的文件

【WebLogic客户端兼容性提升秘籍】：一站式解决方案与实战案例

使用jupyter读取文件“近5年考试人数.csv”，绘制近5年高考及考研人数发展趋势图，数据如下（单位：万人）。

CMake 3.25.3版本发布：程序员必备构建工具

"互动学习：行动中的多样性与论文攻读经历"