relative和absolute的使用(详细+案例)

已于 2022-05-10 21:55:45 修改
阅读量1.4k 收藏 4
点赞数 4
文章标签： html5 css
于 2022-05-10 21:45:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48968669/article/details/124697597
版权

相对定位relative：相对于自己原先的位置而调整位置+会占用原先位置

eg:
原先位置（在没有加top,left,right,bottom调整位置）
在这里插入图片描述
根据原先位置加top而调整定位
在这里插入图片描述

绝对定位absolute：单独使用absolute不会占用原先位置+absolute(子)+relative(父)是固定搭配，如果父元素或祖先元素没有设置相对定位relative，则根据浏览器而定位

eg:
absolute(子)+relative(父)的搭配使用 (有absolute一定要有relative)
在这里插入图片描述
如果父元素没加relative,则absolute会寻找离他最近有加relative的祖先元素
在这里插入图片描述
完

生哥编程
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 5444
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
Absolute（绝对定位）与relative（相对定位）的图文讲解
热门推荐
weixin_42067967的博客
04-30 9万+
Position的属性值有：1.     Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位2.     Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。3.     Relative：相对定位，是相对于其原本的位置来定位的。4.     Static：默认值，没有定位。5.     Inherit：继承父元素的position值。对于初...
相对定位(relative)和绝对定位(absolute)的区别
zhajiangmian_1998的博客
05-29 5973
今天来给大家分享一下html中相对定位(relative)和绝对定位(absolute)的区别：先来波理论解释吧！一：绝对定位  position：absolute绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝...
定位之——相对定位（relative）与绝对定位（absolute）
weixin_y18485705761的博客
05-24 3093
对于相对定位与绝对定位这是很重要的知识点，前端学的怎样也是看你的定位学的怎样，他影响了你的整个页面的排版与布局，废话不多说让我们来看看相对定位和绝对定位吧。position 属性规定元素的定位类型。
absolute和relative的区别
m0_47843571的博客
10-19 5622
1,文档流不同 elative 不脱离文档流，absolute 脱离文档流。` 2,分级不同 1，elative 参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右） 定位，并且可以通过z-index进行层次分级。 2，absolute通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。 3，定位不
li标签的position:absolute与relative案例应用
09-25
本案例中涉及到的是`position`属性的两个值：`relative`和`absolute`，它们在li标签的应用中起到了决定性的作用。 首先，我们来看`position: relative;`。当一个元素的`position`属性设置为`relative`时，它会相...
CSS+DIV布局赏析案例.zip_CSS+DIV布局赏析案例
09-22
4. **定位（positioning）**：CSS的定位属性，如static、relative、absolute和fixed，能精确控制元素在页面上的位置。案例可能利用这些属性实现特定元素的精确定位，如导航栏、侧边栏等。 5. **响应式设计**：随着...
Div+CSS 3.0网页布局案例精粹
12-29
8. **定位机制**：绝对定位（absolute）、相对定位（relative）和固定定位（fixed）是CSS中重要的定位方式。它们允许元素脱离正常文档流，并根据其父元素或视口进行定位。 9. **案例分析**：书籍中的案例精粹部分将...
div+css案例，网页设计
07-31
2. **定位**：通过CSS的position属性（static、relative、absolute、fixed）来精确控制元素在页面上的位置。 3. **盒模型**：理解CSS盒模型，包括content、padding、border和margin，学习如何调整元素的大小和间距...
决定定位和相对定位的区别
gao_zhennan的博客
03-31 1293
前言：学过的好多知识经常是当时学会了、理解了，但是过一段时间不使用就会差不多忘记了，又要花费时间去重复学习。为了避免或者减少重复学习学过的知识，因此对学过的东西进行总结。本文基于“Absolute（绝对定位）与relative（相对定位）"展开，做出了部分修改和补充。 Position的属性值有： 1.     Absolute：绝对定位，是相对于
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
qq_44939011的博客
07-20 9691
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静
前端~定位属性position（relative、absolute、fixed）的分析
伟庭师兄的博客
08-16 171
relative：移动自身时，参考自身的原来位置而移动，移动子元素（子元素设置了absolute），作为定位的基准点（参照物）相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。当absolute对象移出了原来的位置，那么他原来的位置也就不存在了， 其他元素可以占领它的位置。relative它是以自己本身所在位置进行偏移的，relative的对象被移出了原来的位置后，2，position 是否会被内部的子元素继承？
2021-10-30 相对定位和绝对定位
陌殇殇的博客
10-30 395
相对定位： relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局 原占用的位置，会保留，显示默认高于静态定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 相对定位：.
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
Z_CH8648的博客
11-23 3万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 position 属性指定了元素的定位类型，用于指定一个元素在文档中的定位方式。
CSS position 相对定位和绝对定位
JCzlh的博客
12-09 596
CSS position 相对定位和绝对定位 一、position 的四个值：static、relative、absolute、fixed。 绝对定位：absolute 和 fixed 统称为绝对定位 相对定位：relative 默认值：static 二、relative定位与absolute定位的区别 实例： HTML代码： css代码： 初始效果： 1、relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局 给第二个box设置re
absolute位置用法html,html/css中相对定位relative和绝对定位absolute的用法
weixin_42166918的博客
06-07 5441
一、相对定位(position：relative)1、相对定位：将盒子的position属性设置为relative；可通过left、top、right、bottom设置偏移量。相对定位基础用法示例：我们先在页面设置两个div盒子(第一个红色；第二个蓝色)最初的位置我们将第一个盒子进行相对定位；离左边200px；离顶部50px；得到的效果是；得出结论：1、红色盒子是相对于盒子最初的位置向左偏移200...
面试官：介绍一下CSS定位？absolute和relative分别依据什么定位？
最新发布
upgrade_bro的博客
09-01 786
取值名称效果static静态定位(默认值)元素按照标准流布局(不脱标), top、bottom、left 、right等属性不起作用relative相对定位元素按照标准流布局(不脱标)，可以通过top、bottom、left 、right进行定位，定位参照对象是自身在标准流布局中的位置absolute绝对定位元素脱离标准流（脱标），可以通过top、bottom、left 、right进行定位，定位参照对象是最邻近的祖先定位元素， 如果找不到这样的父级元素，参照对象是视口。
CSS使用绝对定位absolute对Html元素布局的实案
我是Sinlion
09-01 1782
在之前一篇文章已经详细的介绍了相对定位relative，有了相对就有绝对，今天详细的研究下绝对定位absolute，这也是在html布局的时候使用频率最高的几个css属性。 对于相对定位，配合top、left等属性，是以父元素为参考进行的定位偏移的，那么绝对定位又是如何定义的呢？ 首先建立一个基本的布局模型，一个父元素拥有三个子元素的结构： <!DOCTYPE html> <ht...
relative相对于谁定位_定位布局进阶
weixin_39817215的博客
01-24 533
在CSS入门中的“定位布局”中，已经学习了fixed、relative、absolute、static这四种定位布局方式。入门阶段仅学习了相对于浏览器或原始位置的定位，进阶中要学习子元素相对父元素或祖先元素的定位。子元素相对父元素定位 子元素相对父元素的定位：父元素定义relative，子元素定义absolute。举例： DOCTYPEhtml>...
写四个HTML和css的小案例
04-18
非常感谢您的提问！以下是四个 HTML 和 CSS 小案例。 1. 垂直居中文字 HTML 代码： ``` <div class="container"> <p class="center">Hello World!</p> </div> ``` CSS 代码： ``` .container { height: 200px; display: flex; justify-content: center; align-items: center; } .center { text-align: center; } ``` 2. 渐变背景色 HTML 代码： ``` <div class="container"> <p>Hello World!</p> </div> ``` CSS 代码： ``` .container { background: linear-gradient(to right, #ffd194, #70e1f5); height: 200px; display: flex; justify-content: center; align-items: center; } p { color: white; font-size: 36px; } ``` 3. 图片缩放 HTML 代码： ``` <div class="container"> <img src="https://www.w3schools.com/w3images/fjords.jpg"> </div> ``` CSS 代码： ``` .container { width: 50%; } img { width: 100%; height: auto; display: block; } ``` 4. 悬浮效果 HTML 代码： ``` <div class="container"> <div class="box"> <img src="https://www.w3schools.com/w3images/fjords.jpg"> <div class="overlay"> <p>Hello World!</p> </div> </div> </div> ``` CSS 代码： ``` .container { width: 50%; } .box { position: relative; } img { width: 100%; height: auto; display: block; } .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); color: white; font-size: 36px; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s; } .box:hover .overlay { opacity: 1; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

生哥编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值