position 有哪些值？absolute/relative 是相对于谁定位的？

最新推荐文章于 2024-03-09 11:20:08 发布
原创 最新推荐文章于 2024-03-09 11:20:08 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#position

本文详细解析了CSS中的五种定位方式：absolute、relative、fixed、static和inherit，分别介绍了它们的工作原理及应用场景，帮助读者深入理解并正确使用这些定位属性。
  1. absolute:  生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  2. relative:  生成相对定位的元素，相对于其正常位置进行定位。
  3. fixed:  生成绝对定位的元素，相对于视窗口进行定位.
  4. static：默认值。没有定位
  5. inherit：规定应该从父元素继承 position 属性的值。

css中定位中的absolute和relative是什么意思
09-25
`position`有四个可能的值：`static`、`fixed`、`absolute`和`relative`，其中`absolute`和`relative`是最常用的两种。 1. `relative`（相对定位）： - 当`position`设置为`relative`时，元素仍然遵循正常的文档流...
css position: absolute、relative详解
10-30
首先，relative定位是相对于元素在文档流中的原始位置进行偏移的定位方式。如果元素设置了position: relative，则可以通过left, right, top, 和 bottom属性来调整元素的位置。设置这些属性会使元素相对于它在文档流...
position的值， relative和absolute分别是相对于谁进行定位，你真的知道吗？
热门推荐
yiyueqinghui的博客
09-19 1万+
常见的position定位方式如下: static 默认值。元素出现在正常的普通流中 relative 生成相对定位的元素，相对于其在普通流中的位置进行偏移。 fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 iframe 进行定位。 inherit 继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。 absolute 生成绝对定位的元素， 相对于最近一级的 不是 static 的父元素来进行定位,如果没有找到的话，最
position 的值， relative 和 absolute 分别是相对于谁进行定位的？
最新发布
zzx262625的博客
03-09 570
absolute : 生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。 fixed （老 IE 不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。 relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。 static 默认值。没有定位，元素出现在正常的流中 sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出
position:absolute相对于谁定位
aliven1的博客
04-30 6990
1.相对定位：相对于块级元素（或行内块）自身位置进行定位； 2.绝对定位：绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）； 绝对定位元素相对的元素是它最近的一个祖先，该祖先满足：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于body进行定位 ...
position:absolute相对哪个元素定位
lzf的博客
06-01 7372
应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性（重点）！
position的值， relative和absolute分别是相对于谁进行定位的
weixin_30332241的博客
09-04 605
absolute:生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。 fixed（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。 relative生成相对定位的元素，相对于其在普通流中的位置进行定位。 static默认值。没有定位，元素出现在正常的流中 sticky生成粘性定位的元素，容器的位置根据正常文档流计算...
面试官：介绍一下CSS定位？absolute和relative分别依据什么定位？
upgrade_bro的博客
09-01 976
取值名称效果static静态定位(默认值)元素按照标准流布局(不脱标), top、bottom、left 、right等属性不起作用relative相对定位元素按照标准流布局(不脱标)，可以通过top、bottom、left 、right进行定位，定位参照对象是自身在标准流布局中的位置absolute绝对定位元素脱离标准流（脱标），可以通过top、bottom、left 、right进行定位，定位参照对象是最邻近的祖先定位元素， 如果找不到这样的父级元素，参照对象是视口。
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 6453
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
position:relative/absolute无法冲破的等级
10-31
### Position:relative/absolute无法冲破的等级解析 #### 前言 在Web前端开发过程中，元素的定位机制是至关重要的。CSS提供了多种定位方式，包括`static`、`relative`、`absolute`、`fixed`和`sticky`。本文将深入...
前端position: absolute是相对于谁定位的?
qq_42750608的博客
10-06 331
前端position: absolute是相对于谁定位的?答: 有position: absolute定位的元素都是找最近的父辈元素(有position:xxx定位的)进行相对偏移的
关于position的relative和absolute分别是相对于谁进行定位的
dianjing2985的博客
07-23 1301
position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。 Relative，CSS中的写...
绝对定位，相对定位
ppznhy的博客
02-21 2078
绝对定位position:absolute 是相对于最近父元素进行定位的，如果最近父元素没有定位，他就会相对于根元素进行定位。而且不再占有原来位置。 相对定位position:relative 是相对自己原来位置定位，继续占有原来位置。 ...
position属性定位相对于哪个元素归纳
qq_42560575的博客
04-15 620
的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。静态定位的元素不受 top、bottom、left 和 right 属性的影响。的元素根据用户的滚动位置进行定位。
position的值，relative和absolute分别相对于什么定位
michael8512的博客
09-14 2323
absolute：生成绝对定位的元素， 相对于最近一级的定位不是 static 的父元素来进行定位。 fixed：（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。 relative：生成相对定位的元素，相对于其在普通流中的位置进行定位。 static： 默认值。没有定位，元素出现在正常的流中 sticky：生成粘性定位的元素
position:absolute相对哪个元素定位，那个元素要满足什么条件
welnee的博客
10-13 1270
1、position: absolute的元素会脱离页面中的文档流，相对于 static 定位以外的第一个父元素进行定位，父元素也要有定位position：relative或position：absolute
position 定位
dayu5992的博客
12-21 151
position属性是指本体相对于上级的定位，position又分绝对定位和相对定位。他的默认值是static，意味着元素没有被定位，出现在文档流中应该出现的位置。如果用position来布局页面，父元素的position属性必须为relative或absolute。行元素加了 position：absolute 后可设置宽和高（加了float和fixed也可以设置宽和高）。 常见属性...
前端面试题：relative、absolute、fixed分别相对于谁定义？
qq_46582421的博客
02-28 2508
relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。. absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。 fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “le.
相对定位position: relative和绝对定位position:absolute
qq_43351249的博客
11-11 195
相对定位: position: relative: 相对于其源文档流的位置进行定位,没有脱离文档流. 通俗地讲就是相对于以前的位置进行偏移. 也就是如果你不写position: relative的值元素处在页面的位置时,这个就是以前位置,加上top后发生的距离以前的位置的偏移. 绝对定位 position:absolute 相对于最近的一个父元素设置了position: relative的进行定位,子绝父相 参考:https://segmentfault.com/a/1190000017756571 ..
请谈谈css中使用position时，relative和absolute分别是相对于谁定位的
07-11
在 CSS 中，position 属性用于指定元素的定位方式。relative 和 absolute 是两种常用的定位方式，它们分别相对于不同的参考对象进行定位。 1. relative：相对定位（relative）是相对于元素自身原有的位置进行定位。当使用 relative 定位时，元素会根据自身在正常文档流中的位置进行移动，但其他元素不会受到其影响。可以通过修改 top、bottom、left 和 right 属性来调整元素的位置。 2. absolute：绝对定位（absolute）是相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）进行定位。绝对定位会使元素脱离正常文档流，不会占据空间。可以通过修改 top、bottom、left 和 right 属性来精确地指定元素在页面中的位置。 综上所述，relative 相对于元素自身进行定位，而 absolute 相对于最近的已定位祖先元素或初始包含块进行定位。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值