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

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

#css

本文将深入解析HTML、CSS中的position属性，包括absolute、relative和fixed定位方式，以及它们在网页布局中的作用，适合前端开发者和设计师参考。
  • absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
  • fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
  • relative：生成相对定位的元素，相对于其正常位置进行定位
  • static 默认值。没有定位，元素出现在正常的流中
  • inherit 规定从父元素继承 position 属性的值
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 6466
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
html图片定位坐标原点,利用CSS定位背景图片的常用方法总结
weixin_30990711的博客
06-04 1401
前言大家在网上最常见的一种方案就是在父元素中relative，然后子元素absolute。这种方案当然好，不过带来的一个缺点就是会改变元素的层级关系，如果在多个地方使用，这样的层叠嵌套的关系会十分混乱。本文先暂时抛弃那种方案，给大家分享几种CSS背景图片定位的方案。1.无依赖的absolute定位在网络上，对absolute存在这样一个误解，认为绝对定位absolute的使用必须要设置父元素相对定...
position的值relative和absolute的定位原点是？
热门推荐
sjinsa的博客
04-26 1万+
relative（相对定位）：定位原点是元素本身所在位置； absolute（绝对定位）：定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的
position的值relative和absolute定位原点是？
博客
03-01 2709
   absolute  生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。    fixed （老IE不支持）  生成绝对定位的元素，相对于浏览器窗口进行定位。    relative  生成相对定位的元素，相对于其正常位置进行定位。    static  默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index ...
position:relative与absolute的定位原点
艺术编程
09-02 2836
position属性用来规定元素的定位类型和方式 ①position：static 默认值，没有定位，元素出现在正常的流中； ②position：fixed 固定定位 是相对于浏览器窗口来进行定位； ③position：relative 相对定位 相对于其本身正常位置来进行定位，它原本所占的空间仍保留； ④position：absolute 绝对定位 相对于定位方式不是static的第一个父元素进行定位（往上寻找参照元素，一直到根元素为止，即body），此时元素原先在正常文档流中所占的空间会关闭..
【前端面试必考】position: relative 与 absolute 的定位原点到底在哪？
残影的博客
05-21 738
在前端布局中，理解position的几种取值，是写出可靠样式的前提。尤其是relative与absolute，它们虽常见，但因其“定位参考系”的定义具有一定抽象性，常被用作基础功力考察点。面试官喜欢出这一类问题，不仅因为它简单易问，更因为它能看出你是否真正理解了BFC、定位上下文与浏览器渲染机制。✅和absolute是 CSS 中定位机制的基石，掌握它们不仅有助于理解布局原理，也是精细化 UI 调整与交互开发的基础能力。📌absolute 定位参照最近的已定位祖先元素；
`position relative` 和 `position absolute` 之间的区别是什么？
最新发布
07-26
CSS 中 `position: relative` 和 `position: absolute` 是两种不同的定位方式，它们在行为和应用场景上有显著的区别。 ### `position: relative` 当一个元素被设置为 `position: relative`，它的定位是相对于其...
列出display的值，说明他们的作用。position的值， relative和 absolute定位原点是？...
05-12 212
display的值： 　　block 像块类型元素一样显示。 　　none 像行内元素类型一样显示。 　　inline-block 像行内元素一样显示， 但其内容像块类型元素一样显示。 　　list-item 像块类型元素一样显示，并添加样式列表标记。 position的值： 　　absolute absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父...
列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
palette_的博客
05-03 3126
1.    block 象块类型元素一样显示。   none 缺省值。向行内元素类型一样显示。   inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。   list-item 象块类型元素一样显示，并添加样式列表标记。   2.    *absolute          生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 
[css] position的relative和absolute定位原点是哪里？
歌谣的博客
02-20 1156
[css] position的relative和absolute定位原点是哪里？ absolute: 定位原点为第一个position不为static的父级元素的左上角。 可以基于该特性实现height:100%生效 relative：定位原点为元素本身的所在位置。 relative的偏移量设置会导致显示效果和定位原点不重合。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
列出display的值，说明他们的作用？position的值， relative和absolute定位原点是？
LuckXinXin的博客
09-07 503
1）display的值 block： 像块类型元素一样显示 none ：元素不显示，并且不占据页面空间 inline-block：像行内元素一样显示，但其内容像块类型元素一样显示 inline：像行内元素一样显示 table：像表格一样显示 flex：弹性布局 2）position的值 absolute：绝对定位，相对于 static 以外的第一个父元素进行定位 fixed （老IE不支持）：生成...
列出display的值，说明其作用。position的值， relative和 absolute定位原点是什么？
limeng886549的博客
08-01 1172
1、display 的值的作用： （1）block 象块类型元素一样显示。 （2）inline 缺省值。象行内元素类型一样显示。 （3）inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 （4）list-item 象块类型元素一样显示，并添加样式列表标记。 2、position 的值的定位区别： （1）absolute 生成绝对定位的元素，相对于 static 定位以外的...
relative的定位
thebigbuding的博客
12-31 1674
平时我们运用position:relative一般都是在使用absolute的时候限制他的相对定位。那如果直接使用relative呢？是相对于什么来进行定位的？一开始的位置：由于设置了padding-left，可以更好地区分一些情况： 用relative，left:50%后的位置： 可以看出，它的移动是相对于元素本身的位置移动。那是移动了多少的位置？ 我设置的是left:50%，显然并不是自身
position属性值static、relative、absolute、fixed作用
TimyChen的博客
01-07 1247
代码实例：                       example                      img{                 width: 40px;                 height: 40px;                 top: 5px;                 left: 150px;         
relative和absolute定位
chenwf
08-20 345
position:relative;仍然处于文档流中 position:absolute；脱离文档流，并且向上寻找有定位的父元素，若每个父元素均无定位，则相对html文档定位，但有个特殊情况，如果父元素均无定位但是设置文档高度大于窗口大小，此时的absolute定位仍然为相对窗口的定位...
relative和absolute的相对定位元素
HS_NOTE的博客
04-19 530
position:relative 相对于最近的有定位的(不包含float属性)元素布局，以父元素的padding内边缘或者兄弟元素的margin外边缘开始 position:absolute 相对于设置了(position:relative)的父元素定位，若最外层都没有设置(position:relative)则根据浏览器定位 情况1： 如果没有设置left,right,top,bottom属性...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值