position的值， relative和absolute定位原点是

最新推荐文章于 2025-11-24 21:21:07 发布
原创 最新推荐文章于 2025-11-24 21:21:07 发布 · 99 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端 #css

本文深入探讨了CSS中的四种定位方式：absolute、fixed、relative和static。absolute定位使元素相对于最近的非static祖先元素定位；fixed定位则相对于浏览器窗口；relative定位则是相对于元素自身的正常位置；而static是默认值，元素按常规流排列。理解这些定位方式对于前端布局至关重要。
  • absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
  • fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
  • relative：生成相对定位的元素，相对于其正常位置进行定位
  • static 默认值。没有定位，元素出现在正常的流中
  • inherit 规定从父元素继承 position 属性的值
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 6443
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
html图片定位坐标原点,利用CSS定位背景图片的常用方法总结
weixin_30990711的博客
06-04 1396
前言大家在网上最常见的一种方案就是在父元素中relative，然后子元素absolute。这种方案当然好，不过带来的一个缺点就是会改变元素的层级关系，如果在多个地方使用，这样的层叠嵌套的关系会十分混乱。本文先暂时抛弃那种方案，给大家分享几种CSS背景图片定位的方案。1.无依赖的absolute定位在网络上，对absolute存在这样一个误解，认为绝对定位absolute的使用必须要设置父元素相对定...
position:relative与absolute的定位原点
艺术编程
09-02 2827
position属性用来规定元素的定位类型和方式 ①position：static 默认值，没有定位，元素出现在正常的流中； ②position：fixed 固定定位 是相对于浏览器窗口来进行定位； ③position：relative 相对定位 相对于其本身正常位置来进行定位，它原本所占的空间仍保留； ④position：absolute 绝对定位 相对于定位方式不是static的第一个父元素进行定位（往上寻找参照元素，一直到根元素为止，即body），此时元素原先在正常文档流中所占的空间会关闭..
position的值relative和absolute的定位原点是？
热门推荐
sjinsa的博客
04-26 1万+
relative（相对定位）：定位原点是元素本身所在位置； absolute（绝对定位）：定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的
position的值relative和absolute定位原点是？
秃头少女
09-22 4039
 absolute：生成绝对定位的元素，定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的。   fixed （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。   relative：生成相对定位的元素，定位原点是元素本身所在位置。   static：默认值。没有定位，元素出现在正常的流中（忽略 top, bo...
[css] position的relative和absolute定位原点是哪里？
歌谣的博客
02-20 1135
[css] position的relative和absolute定位原点是哪里？ absolute: 定位原点为第一个position不为static的父级元素的左上角。 可以基于该特性实现height:100%生效 relative：定位原点为元素本身的所在位置。 relative的偏移量设置会导致显示效果和定位原点不重合。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
列出display的值，说明其作用。position的值， relative和 absolute定位原点是什么？
limeng886549的博客
08-01 1167
1、display 的值的作用： （1）block 象块类型元素一样显示。 （2）inline 缺省值。象行内元素类型一样显示。 （3）inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 （4）list-item 象块类型元素一样显示，并添加样式列表标记。 2、position 的值的定位区别： （1）absolute 生成绝对定位的元素，相对于 static 定位以外的...
列出display的值，说明他们的作用。position的值，relative和absolute定位原点是？
LuckXinXin的博客
02-29 358
block 象块类型元素一样显示。 none缺省值。象行内元素类型一样显示。 inline-block象行内元素一样显示，但其内容象块类型元素一样显示。 list-item象块类型元素一样显示，并添加样式列表标记。 position的值 *absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。 *fixed（老的IE不支持） 生成绝对定位的元素，相对于浏览...
列出display的值，说明他们的作用？position的值， relative和absolute定位原点是？
LuckXinXin的博客
09-07 501
1）display的值 block： 像块类型元素一样显示 none ：元素不显示，并且不占据页面空间 inline-block：像行内元素一样显示，但其内容像块类型元素一样显示 inline：像行内元素一样显示 table：像表格一样显示 flex：弹性布局 2）position的值 absolute：绝对定位，相对于 static 以外的第一个父元素进行定位 fixed （老IE不支持）：生成...
`position relative` 和 `position absolute` 之间的区别是什么？
07-26
CSS 中 `position: relative` 和 `position: absolute` 是两种不同的定位方式，它们在行为和应用场景上有显著的区别。 ### `position: relative` 当一个元素被设置为 `position: relative`，它的定位是相对于其...
position属性absolute与relative 详解
weixin_34352005的博客
07-15 2502
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记。一.解读absolute与relative http://www.blueidea.com/tech/web/2006/4249.asp很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，r...
云服务器安装wkhtmltopdf示例
weixin_41286767的博客
11-24 401
本文介绍了在CentOS 8服务器上安装wkhtmltopdf工具及中文字体的完整流程，并提供了基于Flask的远程PDF生成服务实现方案。主要内容包括：1) 下载安装wkhtmltopdf RPM包并验证安装；2) 安装思源宋体和黑体中文字体；3) 部署Python Flask服务接收HTML内容并返回PDF文件；4) 服务器端口配置和防火墙设置；5) 服务启动与管理方法。该方案解决了HTML转PDF过程中的中文显示问题，为远程PDF生成提供了可靠的实现路径。
网页开发，在线%新版本旅游管理%系统，基于eclipse,html,css,jquery,servlet,jsp,mysql数据库
最新发布
Strategic__的博客
11-24 401
在帮助客户修改这个在线旅游管理系统Demo时，从需求分析到上线迭代，踩了不少坑也攒了些经验。用Eclipse搭框架，HTML+CSS 搞前端页面，jQuery优化交互，Servlet 和 JSP 做后端处理，再配上MySQL存数据，整套下来也算顺顺当当。开发时候关键是多测多改，用户体验这块不能偷懒。现在系统功能稳定，既能满足基础管理需求，也支持定制开发。
网页开发，在线%旧版本旅游管理%系统，基于eclipse,html,css,jquery,servlet,jsp,mysql数据库
Strategic__的博客
11-24 83
界面用HTML搭页面框架，再用CSS调样式，总在布局对齐上卡壳，最后靠jQuery写了些动态效果，页面才活起来。后端咱们用Servlet处理请求时，毕竟有点老了项目总遇到参数传递的坑，调试半天才发现是请求方式没对应上。连接MySQL数据库时，还踩过字段类型不匹配的雷，改了好几次表结构才通。整个过程虽然常加班改bug，但看着查询景点、预订订单这些功能跑通，特别有成就感。也明白做开发得细心，前后端衔接、数据交互每一步都不能马虎，不然一点小问题就可能让整个系统卡壳。
DOM HTML：深入解析与高效运用
lsx202406的博客
11-23 59
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它使用一系列的标记标签（Tag）来描述网页的结构和内容。DOM（Document Object Model，文档对象模型）是一种用于表示和操作 HTML 和 XML 文档的编程接口。它将网页中的元素（如标签、文本、图片等）抽象为对象，方便开发者进行操作。DOM 和 HTML 是前端开发的基础，掌握它们对于提升网页性能和用户体验至关重要。
HTML ``元素：链接外部资源的关键角色与用法
专注信创数据库与云计算领域实践分享，深耕腾讯TDSQL、华为高斯DB等国产数据库，及华为云、腾讯云等云服务应用，记录技术探索与落地经验，与同行交流共进。
11-24 559
摘要：HTML中的<link>元素是实现网页与外部资源连接的关键标签，主要用于关联CSS样式表、网站图标和外部字体等资源。其核心属性rel定义资源关系，href指定资源路径。通过分离HTML结构与CSS样式，提升代码可维护性。典型应用包括加载Google Fonts、设置favicon图标等，常放置在<head>区域与其他元数据配合使用。<link>元素支持相对/绝对路径，并通过预连接优化性能，是构建模块化网页的基础工具。
前后端交互（Servlet+HTML+JDBC）
2501_91483977的博客
11-23 721
涵盖前后端的概念、流程及实现：前端通过表单、AJAX 发送 GET/POST 请求，后端以 Servlet 为核心，通过 HttpServletRequest 收参、HttpServletResponse 响应，支持文字、HTML、JSON 三种返回格式。还整合 JDBC 实现数据持久化，补充 HTTP 状态码与常见问题排查
claude code创建一个html文件，内容是打字游戏，需要打汉字，有分数统计，界面要炫酷，html文件可以直接运行看效果
徐同保的专栏
11-24 307
claude code创建一个html文件，内容是打字游戏，需要打汉字，有分数统计，界面要炫酷，html文件可以直接运行看效果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小码哥・Martin

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

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

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

打赏作者

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

抵扣说明：

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

余额充值