position中relative和absolute属性详解

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例 通过合理运用 position 属性及其值,你可以构建出既美观又实用的页面布局。关键是理解每种定位方式的特性,并根据实际需求灵活组合使用。 阅读详情

看了这么多有关relative和absolute的属性介绍,我觉下面的最容易理解。

关于relative和absolute这段话更简洁

absolute:

absolute英文意思是绝对的意思,实际上是针对父级元素元素定位,且不占用父级元素其他位置(relative定位仍把原来的位置保留),

如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至相对于文档的左上角定位,按照我们中国人的理解观念,这个其实是相对定位,是脱离文档流的。

注:1.  用了abolute属性,原有float属性将失效;

2.  网页居中使用absolute时,容易出错,因为居中事分辨率大小时自适应的,而absolute会以浏览器左上角为远点,不会因为分辨率变化而变化,很多人在这个问题上出错。


relative:

relative的英文意思是相对的意思,实际上是相对于对象当前位置的定位,但是原来的位置仍占据。而且是不脱离文档流的,就算用top、lef、bottom、right或margin将其移动位置,它也会在原来的文档流中占有自己实际大小的一块位置。

注:1.  relative参照父级元素原始点,无父级以body原始点为原始点

2.  父级中有padding,margin等时,原始点参照父级内容区原始点定位


其实,absolute是相对于父对象定位,relative是相对于当前位置定位!哈哈,弄懂了就是这么简单哟!


附加:

一些将position的连接

http://blog.youkuaiyun.com/marty_zhu/article/details/1910597

http://blog.youkuaiyun.com/yangdeli888/article/details/7730339

http://www.dreamdu.com/css/property_background-position/

http://www.cnblogs.com/bluewolfox/archive/2010/04/26/1721335.html

http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html

http://www.cnblogs.com/rainman/archive/2009/04/12/1433988.html

http://www.blueidea.com/tech/web/2009/7010.asp

http://www.jb51.net/web/77495.html

http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html

http://www.cnblogs.com/oneword/archive/2009/12/08/1619248.html



一文读懂css【css3】绝对(absolute)定位和相对(relative)定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块 我们在开发的过程中,经常会使用到相对定位和绝对定位,但我们有时对这两个定位不是很熟悉,往往会弄混,分不清什么是相对定位,什么又是绝对定位。那么,这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位,那么什么是起始位置呢?绝对定位是相对包含块来定位的,那么,那么什么又是包含块?我们清楚,绝对定位有子绝父相这个词,那么,它是什么意思呢?这里的所有疑问,都会在这篇文章中,讲的非常清楚... 阅读详情

相关推荐

深入理解CSS中的position属性:relative与absolute详解

position属性允许开发者为页面元素指定一种定位机制。当设置为static以外的其他值时,元素脱离了正常的文档流,不会影响其他元素的布局。这使得开发者能够自定义元素的位置,覆盖之前的页面布局。relative定位是CSS中的基础定位方式之一,它允许开发者相对于元素在正常文档流中的位置进行调整。当一个元素被设置为时,它原本的位置会被保留,而且可以通过toprightbottomleft属性相对其正常位置进行偏移。例如,如果一个元素设置为后,接着设置top: 10px;

weixin_34779181的博客 650

Absolute(绝对定位)与relative(相对定位)的图文讲解

Position的属性值有:1.     Absolute:绝对定位,是相对于最近的且不是static定位的父元素来定位2.     Fixed:绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动。3.     Relative:相对定位,是相对于其原本的位置来定位的。4.     Static:默认值,没有定位。5.     Inherit:继承父元素的position值。对于初...

weixin_42067967的博客 9万+

别再只盯着meta包了!盘点R语言中7个元分析工具包的特色与适用场景

本文深入评测了R语言中7个主流元分析工具包(meta、metafor、netmeta、mada、mvmeta、metasens、rmeta)的核心功能与适用场景,帮助研究者根据具体需求精准选型。通过对比表格和实际代码示例,详细解析了各工具包在传统两两比较、网络Meta分析、诊断准确性研究等不同场景下的差异化优势,并提供了性能对比和组合使用建议。

weixin_30736301的博客 296

CSS普通属性篇(一):relative与absolute

一、position的属性值 首先基本了解下position的各个属性值: 1、static:默认值。没有定位,元素在正常显示出现(它将忽略top、bottom、left、right、z-index声明) 2、relative:生成相对定位的元素,相对于其正常位置进行移动。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 3、absolu...

madman0621的博客 2591

电磁炉线圈加热仿真全流程:用Ansys Maxwell分析涡流效应与热损耗

本文详细介绍了使用Ansys Maxwell进行电磁炉线圈加热仿真的全流程。通过构建2D轴对称涡流场模型,深入分析了高频下的涡流效应、趋肤效应与热损耗分布,为优化线圈设计、提升加热效率与均匀性提供了量化依据和实用指南。

sss66的博客 963

Icarus Verilog和GTKwave使用简析

本简要介绍Icarus Verilog和GTKwave的使用,使用iverilog(Icarus Verilog)编译仿真verilog而使用GTKWave查看仿真数据波形下载安装 基本使用 iverilog使用 GTKWave使用 iverilog常用选项 使用库 注意

husipeng86的专栏 1万+

absolute和relative的区别

1,文档流不同 elative 不脱离文档流,absolute 脱离文档流。` 2,分级不同 1,elative 参考自身静态位置通过 top(上),bottom(下),left(左),right(右) 定位,并且可以通过z-index进行层次分级。 2,absolute通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。 3,定位不

m0_47843571的博客 6135

电力电子技术(13)——大功率可控整流电路

目录引言2.6.1 带平衡电抗器的双反星形可控整流电路电路结构的特点接平衡电抗器的原因平衡电抗器使得两组三相半波整流电路同时导电的原理分析谐波分析2.6.2 多重化整流电路概述原理目标1)移相多重联结2)多重联结电路的顺序控制3重晶闸管整流桥顺序控制带平衡电抗器的双反星形可控整流电路(是多重化整流电路的重要形式之一)的特点:适用于低电压、大电流的场合。多重化整流电路的特点:绕组的极性相反的目的:消除直流磁通势如图所示,虽然两组相电流的瞬时值不同,但是平均电流相等而绕组的极性相反,所以直流安匝(电流*匝数)互

weixin_45589295的博客 1万+

absolute与relative两种定位方式

在使用这些定位方式时,通常需要结合使用,比如将一个元素设置为 ,然后将它的子元素设置为 ,这样就可以相对于父元素定位子元素。这种方式常用于精确控制布局中的元素位置。

持续输出,励志当全栈开发人员 611

解密Android相机框架:从HAL到应用层的全链路解析

本文深入解析Android相机框架的全链路架构,从应用层到硬件抽象层(HAL)再到驱动层,详细介绍了CamX-CHI架构的设计哲学与实战应用。通过HAL3接口、V4L2交互机制及Camera2 API的最佳实践,帮助开发者优化相机性能,解决多摄切换、预览卡顿等常见问题,提升成像效率与稳定性。

weixin_29238147的博客 408

【好玩的游戏项目】使用Docker快速部署属于你的RPG网页小游戏

【好玩的游戏项目】使用Docker快速部署属于你的RPG网页小游戏

jks212454的博客 5577

Position 的 relative 和absolute属性的详解

[转载自:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html] 在网上偶然看到这篇对relative和absolute属性的详细解析,觉得讲得很好,所以 给大家提供下

Luxd的博客 345

ICM20948 DMP代码详解(69)

ICM20948 DMP代码详解(69)

phmatthaus的专栏 616

Positon的各个属性值和区别作用

面试官提问: “absolute 和 relative 有什么区别?fixed 是相对于谁定位的?sticky 的生效条件是什么?”

2504_94675045的博客 586

基于MATLAB的BOC调制信号捕获算法仿真

然而,在实际的使用过程中,由于室内信号衰减以及遮挡等因素的影响,接收机在GPS信号弱化时会很容易丢失导航信息。与其他的调制方式相比,BOC具有较好的抗多径性能和更高的频带效率。通过本文的介绍,我们可以更加深入地了解BOC调制信号的捕获算法,并且掌握了如何使用MATLAB软件对其进行仿真实现。通过实验数据的分析,我们可以看出该算法对于BOC调制信号的捕获具有较高的准确率和稳定性,因此具有一定的工程应用价值。在BOC调制完成后,我们需要进行信号的捕获,这一步涵盖了信号检测、码偏差估计、载波频率估计等过程。

2301_79326559的博客 567

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

相对定位 relative 和 绝对定位 absolute

1、absolute:绝对定位,相对最近父元素,原有空间不保留会被其他元素挤占。宽度为文本宽度,且宽度不会影响父元素宽度 2、relative:相对定位,相对自身原来位置,原有空间保留,不会被挤占。宽度为父元素宽度,且宽度会撑大/缩小父元素宽度 Position的属性值有 Absolute:绝对定位,是相对于最近的且不是static定位的父元素来定位,如果没有父级元素,就以根节点 Fixed:绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动。 Relative:相对定位

qq_45886500的博客 1492

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

php position设置,html 之 position用法

在此,先做声明,本篇仅是摘录自互联网,个人认为这篇文章讲的很不错,附于此地与大家共同欣赏。position的四个属性值:1.relative2.absolute3.fixed4.static下面分别讲述这四个属性。sub1sub21. relativerelative属性相对比较简单,我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中,sub1和sub2是同级关系,如果设定...

weixin_39855568的博客 234

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

定位 position:absolute和position:relative的区别

区别:定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在。 position各个属性值的定义: 1、static:默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。 2、relative:生成相对定位的元素...

在安静的地方安静地生活 2万+

position属性absolute与relative 详解

最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记。一.解读absolute与relative http://www.blueidea.com/tech/web/2006/4249.asp很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,r...

weixin_34352005的博客 2549

CSS position属性之relative和absolute

搭配top、bottom、left、right这四个属性使用,left和right不能一起设置,top和bottom不能一起设置。默认以body节点作为参考点,如果祖先元素也是定位流(relative/absolute/fixed), 那么以定位流的祖先元素作为参考点。设置了相对定位的元素不管它是否进行移动,元素仍然占据它原来的位置。都设置定位的两个元素,后写的元素会覆盖在先写的元素上面。子绝父相:如果想要子元素定位于父元素的某个位置,相对定位元素常常作为绝对定位元素的父元素。绝对定位的元素会脱离普通流。

m0_51371779的博客 1297

JS position属性之absolute与relative 详解

一.解读absolute与relative  http://www.blueidea.com/tech/web/2006/4249.asp    很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什...

gabby____的博客 1万+

关于position:relative absolute fixed定位和布局的踩坑心得

position属性介绍 absolute 顾名思义,这是绝对定位的意思,我们在使用时通常都是给元素声明了position:absolute属性,然后再用top,left,right,bottom属性去改变元素的位置,语法示例如下: position:absolute; top:10px; 该语句设置了定位方式为absolute,并且向下偏移了10px relative relative是相对定...

英俊帅比林的博客 1万+

position:absolute与relative的区别

Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。 一般来讲...

Ven 1万+

CSS position 属性(absolute、relative详解)

最近被问到position 属性absolute与relative的区别,感觉自己不是很清楚,故决定来查查看:        w3cschool中定义:     position可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "to

Sparkjin的专栏 2129

关于HTML的position 属性以及relative、absolute、fixed的区别

在页面的编写过程中我们通常会用到html的position属性来合理安排我们标签的位置,来达到视觉的美观,所以我们需要加深对position这个属性的了解。 一、Position的属性值 position有四个值:static,relative,absolute,fixed; div{position:×××;left:×××;right:×××;top:×××;bottom:×××;} 二、s...

不定期更新的博客 2407

relative会脱离文档流吗_css position: absolute脱离文档流详解

原标题:css position: absolute脱离文档流详解CSS2.0 HandBook上的解释:设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( bor...

weixin_39956612的博客 3022
上一篇: 最全的Git安装配置:win7(32)Git+TortoiseGit+COPSSH及连接教程(图文并茂)
下一篇: relative和absolute的属性详解
新凉
博客等级 码龄16年 22粉丝 41原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值