relative和absolute定位

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

#position

本文详细解析了CSS中position属性的relative和absolute两种值的区别与用法。relative定位元素仍占据原有位置，而absolute则使元素脱离文档流，依据最近的已定位祖先元素进行定位。若无已定位祖先，则依据视口或特定条件下的文档根节点定位。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

position:relative;仍然处于文档流中

position:absolute；脱离文档流，并且向上寻找有定位的父元素，若每个父元素均无定位，则相对html文档定位，但有个特殊情况，如果父元素均无定位但是设置文档高度大于窗口大小，此时的absolute定位仍然为相对窗口的定位

chenwf293
关注
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 6299
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
css定位，relative和absolute的结合使用
mysevenyear的博客
05-15 4523
1、单独使用：relative：相对于本身偏移，没有脱离文档流。absolute：相对于浏览器定位，脱离了文档流，也就是不占位置。在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点，如下：（没有设置TRBL） <style> body{ margin: 0; pad...
position的值relative和absolute的定位原点是？
热门推荐
sjinsa的博客
04-26 1万+
relative（相对定位）：定位原点是元素本身所在位置； absolute（绝对定位）：定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的
position:relative与absolute的定位原点
艺术编程
09-02 2806
position属性用来规定元素的定位类型和方式 ①position：static 默认值，没有定位，元素出现在正常的流中； ②position：fixed 固定定位 是相对于浏览器窗口来进行定位； ③position：relative 相对定位 相对于其本身正常位置来进行定位，它原本所占的空间仍保留； ④position：absolute 绝对定位 相对于定位方式不是static的第一个父元素进行定位（往上寻找参照元素，一直到根元素为止，即body），此时元素原先在正常文档流中所占的空间会关闭..
position的值， relative和absolute定位原点是
LuckXinXin的博客
01-31 185
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位 fixed：生成绝对定位的元素，相对于浏览器窗口进行定位 relative：生成相对定位的元素，相对于其正常位置进行定位 static 默认值。没有定位，元素出现在正常的流中 inherit 规定从父元素继承 position 属性的值 ...
relative和absolute的相对定位元素
HS_NOTE的博客
04-19 514
position:relative 相对于最近的有定位的(不包含float属性)元素布局，以父元素的padding内边缘或者兄弟元素的margin外边缘开始 position:absolute 相对于设置了(position:relative)的父元素定位，若最外层都没有设置(position:relative)则根据浏览器定位 情况1： 如果没有设置left,right,top,bottom属性...
css基础--定位position:relative和absolute的区别、应用
红尘道，红尘练心
10-19 261
　　Div+CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。 Position属性有四个值： static、fixed、absolute和relative，后面两个在布局中的定位里是经常用到的，顾名思义，absolute是指绝对定位，即将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位，而其层叠通过z-i...
css中定位中的absolute和relative是什么意思
09-25
理解`relative`和`absolute`定位的关键在于它们如何影响元素自身及其周围元素的位置。`relative`定位允许元素在文档流中微调位置，而不改变其他元素的布局；而`absolute`定位则让元素可以完全独立于文档流，根据需要...
HTML的relative与absolute使用及区别详解
01-19
但是还是有一些比较难理解掌握标签和属性，就比如属性position,它是定位的一种方式代码如下： #div1{ position: relative; width: 200px; height: 200px; background-color: blueviolet; margin-left: ...
区别div和span、relative和absolute、display和visibility
09-25
而定位方面，`relative`常用于微调元素位置，`absolute`则常用于创建复杂的层叠效果和自定义布局。 理解这些基本概念对于创建响应式、高效的网页至关重要。正确的使用能帮助开发者更好地控制元素的布局、显示状态和...
position的值relative和absolute定位原点是？
秃头少女
09-22 4026
 absolute：生成绝对定位的元素，定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的。   fixed （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。   relative：生成相对定位的元素，定位原点是元素本身所在位置。   static：默认值。没有定位，元素出现在正常的流中（忽略 top, bo...
浅谈绝对定位:absolute与相对定位:relative
yy_9_aa的博客
09-23 3867
绝对定位（absolute）: 1. 以浏览器左上角的为参考点设置位置。 2. 与浮动一样不占据空间位置。 3. 嵌套的盒子，父元素无定位，子元素绝对定位，子元素仍然参照浏览器。 4. 父元素绝对定位，子元素绝对定位，子元素以父元素为参考点。 5. 给行内元素绝对定位之后就转化为行内快了。 6. 可以设置z-index[调整元素的层叠顺序]值的范围是:0-999，值大的在上方
关于position:relative absolute fixed定位和布局的踩坑心得
英俊帅比林的博客
09-21 1万+
position属性介绍 absolute 顾名思义，这是绝对定位的意思，我们在使用时通常都是给元素声明了position:absolute属性，然后再用top,left,right,bottom属性去改变元素的位置，语法示例如下： position:absolute; top:10px; 该语句设置了定位方式为absolute,并且向下偏移了10px relative relative是相对定...
css position属性
Johnny0991的专栏
06-28 587
①absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。 ②relative ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。 ③fixed ：固定定位；类似于absolute，但不随着滚动条的移动
[css] position的relative和absolute定位原点是哪里？
歌谣的博客
02-20 1053
[css] position的relative和absolute定位原点是哪里？ absolute: 定位原点为第一个position不为static的父级元素的左上角。 可以基于该特性实现height:100%生效 relative：定位原点为元素本身的所在位置。 relative的偏移量设置会导致显示效果和定位原点不重合。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
一个专为IntelliJIDEA和AndroidStudio开发者设计的全能格式转换与数据辅助工具_支持JSON_XML_HTML格式化_MD5生成_QRCODE二维码生成_B.zip
最新发布
08-17
一个专为IntelliJIDEA和AndroidStudio开发者设计的全能格式转换与数据辅助工具_支持JSON_XML_HTML格式化_MD5生成_QRCODE二维码生成_B.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值