css里的relative和absolute区分

最新推荐文章于 2021-06-15 18:50:25 发布
最新推荐文章于 2021-06-15 18:50:25 发布
阅读量421 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xianyu_Padding/article/details/72773543
版权

relative是相对定位，absolute是绝对定位，
“相对定位的元素是相对自身进行定位，参照物是自己。”
“绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位”

CSS之定位布局 -- position：relative/absolute/fixed/sticky
qq_48802092的博客
07-27 513
特点默认文档流定位---positionstatic;
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7008
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
CSS中absolute和relative的区别
Low_Key_Shulman的博客
03-04 1213
好久没更新了，最近想把之前学习到的知识都做一个整理，可能大家在用CSS排版时容易有一个困惑就是position:relative和position:absolute有什么区别，之前也在不断地练习和查资料中弄清楚了他们的差别。下面简单说一下。1.position:relativerelative是相对定位，设置position为relative的元素，其top、left、right、bottom值会相
CSS中的relative和absolute的区别
xu3tu的博客
04-11 419
relative 是相对元素本身进行定位，不会脱离文档流，其之前的位置保留； absolute基于前一个不是static定位的父元素进行定位，脱离文档流，之前位置不保留。...
CSS中absolute与relative的区别和联系
pon的博客
03-31 594
absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读. Absolute Absolute，CSS中的写法是：position:absolute;他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGH...
CSS中，relative和absolute的区别，及结合使用
good god~的博客
08-25 2409
固定定位 写法：position：fixed； 不会随浏览器窗口的滚动条滚动而变化，总是在视线里的元素（例如两边的广告，这个比较简单就不进行介绍） 相对定位 写法：position：relative； 定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在。 相对于本身偏移，没有脱离文档流。 <div class="box"> <div class...
css 之 relative
小白向前冲！
02-04 879
【1】对同源属性值的限制作用 relative 对 absolute 的作用： （1）限制定位 （2）限制层级 （3）限制超越 overflow relative 对 fixed 的作用 （1） 限制 z-index 层级 【2】 relative 定位的特点 （1） 相对自身 ： 相对于自身的初始位置进行定位 （2） 无侵入
（代码）带 HTML CSS 和 JavaScript 的步骤进度条
03-20
`completed`和`active`状态下的线条颜色不同，以区分已完成和正在进行的步骤。 **JavaScript 动态更新** 最后，当用户在流程中前进或后退时，我们需要用JavaScript来更新进度条的状态。这可以通过监听事件或API...
CSS模仿遥控器按钮
09-24
4. CSS定位方式position：在创建遥控器按钮时，使用了相对定位（relative）和绝对定位（absolute）来控制元素的确切位置。通过相对定位的外层元素和绝对定位的内层元素，可以精确控制每个按钮的位置和大小。 5. CSS...
css3进度条
11-06
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是进度条的实现。CSS3进度条是用于显示任务完成度或数据加载状态的一种可视化元素，它能够以优雅的方式反馈给用户某个过程的进度...
css之relative
02-07 176
一、relative对absolute的限制作用 1、限制left/top/right/bottom定位。absolute默认是在也没的左上角，当父类设定为relative,absolute就被限制在父类的区域内，设定top/left/right/bottom时，起始点为父类的左上角 2、限制z-index层级。页面中的俩个absolute的z-index不同且不为auto，...
CSS中的相对定位(relative)
liukai6的博客
02-28 513
相对定位的设置方法如下 position: relative; 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 可以将其简单认为相对原来的位置的定位. 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么...
CSS属性之relative
u011927449的博客
05-14 650
0.相对定位relative特点 相对定位relative元素总是会占据位置，所占据的位置是在relative元素没有设置left/top/right/bottom属性时的位置； 相对定位relative元素在设置定位时，不会影响其他元素； 相对定位relative元素在设置定位时，是相对于自身的定位 <div class="page"> <div class="backTop">position:relative</div> <div class="no
css中relative、absolute和float
且听真言
03-09 1270
position:relative和position:absolute都可以改变元素在文档流中的位置，设置position:relative或position:absolute都可以让元素激活left、top、right、bottom和z-index属性（默认情况下，这些属性未激活，设置也无效） 网页虽然看起来是平面的二维结构，但其实是有z轴的，z轴的大小由z-index控制，默认情况下，...
html中怎么设置相对,CSSrelative怎么用？CSS中relative（相对）定位的用法详解
weixin_34438187的博客
06-15 673
在css的position属性中有四个属性值：static(静态的)、relative(相对的)、fixed(固定的)、absolute(绝对的)，今天的这篇文章就来给大家介绍一下CSS中relative(相对)定位的用法。话不多说，下面我们就来直接看看css中relative怎么用。首先我们来简单看一下relative(相对)定位的概念根据W3C上的定义我们可以知道相对定位是一个非常容易掌握的概...
CSS深入理解之relative
lixiaohong2012的博客
03-30 737
position:relative（老大） 定位特性： 1.相对自身 2.无侵入（作用：自定义拖拽）层级 1.提高层叠上下文 2.新建层叠上下文与层级控制position:relative对限制position:absolute的限制作用： 1.限制left/top/right/bottom定位； 2.限制z-index层级；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值