一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块

原创 已于 2024-11-08 16:40:21 修改 · 6.6k 阅读 · 36
标签
#前端 #css #布局 #相对定位 #绝对定位
于 2022-07-31 14:09:48 首次发布

目录

何为定位

我们可以通过定位将元素摆放到页面的任意位置，因为它是一种高级的布局手段，它有以下5个可选值：

值 解释
static 默认值，元素是静止的，没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位

对于以上5个可选值，我们最易弄混的便是relative 和absolute 这两个。

因而，就这两个可选值进行如下详细分析，但在分析之前，我们要考虑下偏移量，因为偏移量对定位是有很大影响的。

比如如果元素开启了相对定位，但不设置偏移量，元素不会发生任何的变化。

偏移量

只要元素开启了定位，我们可以通过偏移量来设置元素的位置。

垂直方向

定位元素垂直方向的位置由top 和

了解本专栏 订阅专栏 解锁全文
CSS中相对定位与绝对定位的区别及作用
XSL_HR的博客
04-14 2941
一篇文章带你快速掌握相对定位和绝对定位
LLaMA-Factory数据集成实战：手把手教你配置dataset_info.json（含多模态避坑指南）
weixin_30576827的博客
03-29 506
本文详细介绍了如何在LLaMA-Factory中配置dataset_info.json文件，特别关注多模态数据集成时的常见问题与解决方案。通过实战案例展示Alpaca和ShareGPT格式的选择与应用，提供图像、视频等多媒体数据处理技巧，帮助开发者高效完成AI模型训练的数据准备。
CSS绝对定位absolute详解
嘿嘿
01-16 2万+
之前介绍过CSS浮动float详解，本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动float，对理解绝对定位absolute会大有帮助。 先说absolute和float的相似处：包裹性 和 高度欺骗 包裹性 所谓一图胜千言（唯一的区别是：下图的div增加了absolute） <div style="border:4px solid blu...
CSS中relative与absolute的区别_详解相对与绝对定位应用场景
2301_81666021的博客
04-26 284
适合微调：按钮图标右移 2px、下划线往下压 1px、tooltip 紧贴文字底部不撑高父容器：哪怕你 top: 100px，父 div 高度还是按它“没动时”的位置算别乱加：没写 top/left 却设了 relative，纯属冗余，还可能意外成为子 absolute 的锚点absolute 必须有“爹”，否则就认 bodyposition: absolute 一上身，元素立刻从文档流消失，不占空间、不影响别人布局。那就直接相对于视口（body）左上角定位，这也是为什么它常突然“飞到页面顶上”。
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
csgojingyu的博客
10-21 2万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
前端工程师实战15：2千字彻底读懂CSS四大定位（相对定位、绝对定位、固定定位、粘滞定位）
qq_26226059的博客
05-05 296
相对定位 现在有如下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> ​ <style> ...
html和css(1)
qq_53280805的博客
06-26 157
html和css的一些问题
慕课网前端面试03--HTML/CSS面试题
sinat_28753227的博客
07-15 399
HTM和CSS基础
1、html和css
qq_34231078的博客
04-08 290
一、HTML 如何理解HTML语义化？ 1、让人更容易读懂（增加代码可读性） 2、让搜索引擎更容易读懂（SEO） 默认情况下，哪些HTML标签是块级元素，哪些是内联元素？ 1、块级元素：display: block/table，有div、h1~h6、table、ul、ol、p等 2、内联元素：display: inline/inline-block，有span、img、select、input、button、label等 二、CSS 盒子模型的宽度如何计算？ #div1{ with:
CSS面试题总结
xiaojia119的博客
05-23 102
<p>AAA</p>
Absolute（绝对定位）与relative（相对定位）的图文讲解
热门推荐
weixin_42067967的博客
04-30 9万+
Position的属性值有：1.     Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位2.     Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。3.     Relative：相对定位，是相对于其原本的位置来定位的。4.     Static：默认值，没有定位。5.     Inherit：继承父元素的position值。对于初...
CSS学习20：absolute（绝对定位）
玉安_ZhangDe的博客
04-09 7124
绝对定位的介绍： 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。 语法： 选择器 { position: absolute; } 1、完全脱标 —— 完全不占位置； 2、父元素没有定位，则以浏览器为准定位（Document 文档）。 3、父元素要有定位 i.元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 ii.绝对定位的特点总结：（务必记住）...
relative和absolute的使用(详细+案例)
qq_48968669的博客
05-10 1786
相对定位relative：相对于自己原先的位置而调整位置 eg: 原先位置（在没有加top,left,right,bottom调整位置） 根据原先位置加top而调整定位 绝对定位absolute：absolute(子)+relative(父)是固定搭配，如果父元素或祖先元素没有设置相对定位relative，则根据浏览器而定位 eg: absolute(子)+relative(父)的搭配使用 (有absolute一定要有relative) 如果父元素没加relative,则absolute会寻找离他最
相对定位和绝对定位
smell201611010513的博客
02-04 5083
定位
css的相对定位和绝对定位（固定定位）
qq_51476492的博客
06-02 1万+
css的绝对定位和相对定位
html css 面试题
weixin_40739653的博客
05-05 460
inline元素：水平：text-align：center。垂直：line-height的值等于height的值。垂直：top：50%+margin-top负值。absolute元素：水平：left：50%+margin-left负值。absoulte 依据最近一层的定位父元素定位。4，display为flex，inline-block。block元素：水平：margin：auto。3，overflow不是visible。rem，相对长度单位，相对于根元素。em，相对长度单位，相对于父元素。
01 html css 相关面试题
qq_37855753的博客
09-14 196
1.如何理解HTML语义化 1.让人更容易读懂代码，增加代码可读性。 2.让搜索引擎更易读懂代码(SEO搜索引擎优化)。 3.介绍一个语义化的例子，如一段html代码都使用div和一段html代码段落使用p列表使用li。 2.默认情况下，哪些HTML标签是块级元素，哪些是内联元素 1.块状元素：独占一行，diaplay:block/table的元素，有div,h1,h2,table,ul,ol,p等。 2.内联元素：不会独占一行，会挨个往后排直到浏览器的边缘换行为止，display:...
前端面试基础学习笔记
倩mys的博客
05-23 3452
文章目录1 HTML01 如何理解 HTML 语义化？02 默认情况下，哪些 HTML 标签是块级元素、哪些是内联元素？2 CSS01 盒子模型的宽度如何计算？02 margin 纵向重叠问题03 margin 负值问题04 BFC 理解与应用05 如何实现圣杯布局和双飞翼布局06 手写 clearfix07 flex 实现一个三点的色子08 absolute 和 relative 分别依据什么定位？09 居中对齐有哪些实现方式？***10 line-height 如何继承11 响应式 - rem 是什么？
新闻语义解析流水线：面向NLP工程师的结构化事件抽取方案
最新发布
ateu52935的博客
06-12 534
新闻文本是典型的非结构化数据，其语义解析需突破通用NLP模型在时效性、可解释性与领域适配性上的瓶颈。核心原理在于融合规则引擎与轻量级模型，实现时间归一化、地理映射、机构消歧与事件类型识别等关键锚点提取；技术价值体现在毫秒级响应、确定性输出与边缘设备部署能力；广泛应用于舆情监控、金融事件驱动策略、政策影响分析等强时效、高可信场景。本文聚焦‘新闻’这一垂直领域，深入解析HTML结构感知、相对时间硬编码、Cypher式语义编译等17个落地细节，覆盖NLP News Cypher中新闻结构感知器、语义锚定引擎两大核
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

互联网全栈开发实战

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

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

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

打赏作者

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

抵扣说明：

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

余额充值