css里的relative和absolute区分

最新推荐文章于 2021-06-15 18:50:25 发布
原创 最新推荐文章于 2021-06-15 18:50:25 发布 · 449 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

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

HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 8245
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浮动和定位
weixin_47782618的博客
04-13 759
1. float属性 1.1 浮动的定义及理解 任何元素浮动后都会变成块级元素。 CSS的float使元素脱离文档流（指元素在文档中不占位置了），按照指定的方向发生移动，直到它碰到父元素的边框或者另一个浮动元素的边框为止（浮动不会重叠）。浮动最初是用于图像环绕文字，所以尽管元素设置浮动后不占据位置，但文字仍能环绕在浮动元素周围，而不是被浮动元素覆盖。 ① 浮动元素的外边缘碰到包含框的情况： 框一向右浮动，直至它碰到了父元素的边框 ② 浮动元素碰到另一个浮动元素的边框的情况： 框一、框二、框
CSS中absolute和relative的区别
Low_Key_Shulman的博客
03-04 1268
好久没更新了，最近想把之前学习到的知识都做一个整理，可能大家在用CSS排版时容易有一个困惑就是position:relative和position:absolute有什么区别，之前也在不断地练习和查资料中弄清楚了他们的差别。下面简单说一下。1.position:relativerelative是相对定位，设置position为relative的元素，其top、left、right、bottom值会相
CSS中的relative和absolute的区别
xu3tu的博客
04-11 458
relative 是相对元素本身进行定位，不会脱离文档流，其之前的位置保留； absolute基于前一个不是static定位的父元素进行定位，脱离文档流，之前位置不保留。...
CSS中absolute与relative的区别和联系
pon的博客
03-31 638
absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读. Absolute Absolute，CSS中的写法是：position:absolute;他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGH...
CSS中，relative和absolute的区别，及结合使用
good god~的博客
08-25 2513
固定定位 写法：position：fixed； 不会随浏览器窗口的滚动条滚动而变化，总是在视线里的元素（例如两边的广告，这个比较简单就不进行介绍） 相对定位 写法：position：relative； 定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在。 相对于本身偏移，没有脱离文档流。 <div class="box"> <div class...
css 之 relative
小白向前冲！
02-04 925
【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 211
一、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 551
相对定位的设置方法如下 position: relative; 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 可以将其简单认为相对原来的位置的定位. 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么...
CSS属性之relative
baie2621的博客
01-28 185
0.相对定位relative特点 相对定位relative元素总是会占据位置，所占据的位置是在relative元素没有设置left/top/right/bottom属性时的位置； 相对定位relative元素在设置定位时，不会影响其他元素； 相对定位relative元素在设置定位时，是相对于自身的定位 <div class="page"> <div c...
css中relative、absolute和float
且听真言
03-09 1309
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 734
在css的position属性中有四个属性值：static(静态的)、relative(相对的)、fixed(固定的)、absolute(绝对的)，今天的这篇文章就来给大家介绍一下CSS中relative(相对)定位的用法。话不多说，下面我们就来直接看看css中relative怎么用。首先我们来简单看一下relative(相对)定位的概念根据W3C上的定义我们可以知道相对定位是一个非常容易掌握的概...
CSS深入理解之relative
热门推荐
qq_25178609的博客
07-11 1万+
今天看到一个特别有趣的视频，讲解position：relative，听完这个老师生动的讲解，瞬间就懂了 看完漫画做个总结啊： 1 . position:absolute; 他的意思是绝对定位，默认上溯父级元素，找第一个不是 static 的元素，以其为 absolute 的基准。如果设定TRBL并且父级没有设定position属性，那么当前的a
区分网页左边右边中间模块html css
最新发布
06-13
### 左中右三栏布局的实现方法 为了实现包含左中右三栏布局的网页，可以采用多种CSS技术。以下是几种常见的方法及其代码示例： --- #### 方法一：使用Grid布局 Grid布局是一种现代且强大的CSS布局方式，适合创建复杂的多列布局。 ```html <style> .container { display: grid; grid-template-columns: 200px 1fr 200px; /* 左侧栏固定200px，中间栏自适应，右侧栏固定200px */ height: 300px; /* 设置容器高度 */ } .left, .right { background-color: #ebc4c4; /* 左右栏背景颜色 */ } .center { background-color: #a5e1bf; /* 中间栏背景颜色 */ } </style> <div class="container"> <div class="left">左侧栏</div> <div class="center">中间栏</div> <div class="right">右侧栏</div> </div> ``` 这种方法通过`grid-template-columns`定义了三栏的宽度比例，其中中间栏设置为`1fr`以实现自适应[^1]。 --- #### 方法二：使用Flexbox布局 Flexbox是另一种流行的布局方式，适用于响应式设计。 ```html <style> .box { display: flex; width: 100%; height: 200px; } .left, .right { width: 100px; /* 左右栏固定宽度 */ border: 1px solid #FF0000; } .main { flex: 1; /* 中间栏自适应 */ border: 1px solid #FF0000; } </style> <div class="box"> <div class="left">左侧栏</div> <div class="main">中间栏</div> <div class="right">右侧栏</div> </div> ``` 在Flexbox中，`flex: 1`表示中间栏会自动占据剩余的空间[^4]。 --- #### 方法三：使用绝对定位 绝对定位可以通过将左右栏固定位置，中间栏通过`margin`留出空间来实现。 ```html <style> .container { position: relative; width: 100%; height: 200px; } .left { position: absolute; left: 0; top: 0; width: 100px; height: 200px; background-color: black; color: white; } .center { margin: 0 100px; /* 左右各留出100px空间 */ height: 200px; background-color: yellow; } .right { position: absolute; top: 0; right: 0; width: 100px; height: 200px; background-color: red; } </style> <div class="container"> <div class="left">左侧栏</div> <div class="center">中间栏</div> <div class="right">右侧栏</div> </div> ``` 这种方法利用了绝对定位和`margin`属性，确保中间栏能够自适应[^2]。 --- #### 方法四：使用浮动布局 浮动布局是一种传统的布局方式，适用于简单的三栏布局。 ```html <style> .left, .right { float: left; width: 100px; height: 200px; border: 1px solid #FF0000; } .main { margin: 0 100px; /* 左右各留出100px空间 */ height: 200px; border: 1px solid #FF0000; } </style> <div class="left">左侧栏</div> <div class="main">中间栏</div> <div class="right">右侧栏</div> ``` 通过为左右栏设置浮动，并为中间栏设置`margin`，可以实现三栏布局[^4]。 --- #### 方法五：使用多列布局 多列布局适用于文本内容较多的场景，但不适用于复杂的内部布局。 ```html <style> .container { column-count: 3; column-gap: 20px; height: 300px; } .left, .center, .right { break-inside: avoid; border: 1px solid #FF0000; padding: 10px; } </style> <div class="container"> <div class="left">左侧栏</div> <div class="center">中间栏</div> <div class="right">右侧栏</div> </div> ``` 这种方法通过`column-count`定义了三列布局，但可能不适用于需要独立滚动或复杂内部布局的场景[^3]。 --- ### 总结 以上方法各有优缺点： - **Grid布局**：适合复杂的多列布局，语法简洁。 - **Flexbox布局**：适合响应式设计，灵活性高。 - **绝对定位**：适合固定的布局需求。 - **浮动布局**：传统方法，简单易用。 - **多列布局**：适合文本内容较多的场景。 选择具体方法时，需根据实际需求权衡。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值