position:absolute相对哪个元素定位，那个元素要满足什么条件

最新推荐文章于 2023-05-23 11:32:03 发布
最新推荐文章于 2023-05-23 11:32:03 发布
阅读量1.1k 收藏
点赞数
分类专栏： 前端面试 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/welnee/article/details/109063583
版权
本文深入探讨了CSS中`position:absolute`属性的使用，它如何使元素脱离文档流，并相对于最近的已定位父元素进行定位。理解这一特性对于前端开发者至关重要，特别是当需要创建复杂的布局或弹出窗口时。
摘要由CSDN通过智能技术生成

1、position: absolute的元素会脱离页面中的文档流，相对于 static 定位以外的第一个父元素进行定位，父元素也要有定位position：relative或position：absolute

welnee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css:绝对定位那些事--position:absolute
weixin_44455764的博客
10-10 418
position是css样式的属性之一，之所以想写这个，是因为觉得用的时候不是很熟练，所以总结一些常用的用法，如果有不足之处也希望大家来指正，谢谢！ 前端学习之路尚远，学习之余我也想总结一些自己学过的东西，顺便巩固自己的知识，分享也是一种收获嘛！
CSS基础-position: absolute绝对定位的默认位置
m0_51757444的博客
05-13 1370
绝对定位position的值为absolute时的默认位置 前言 今天上午练习定位时发现了这么一个东西： 元素设置为绝地定位后不给它添加top时是正常的我想要的结果； 添加top后还需要精确的计算。 正文 感觉你也应该开始好奇默认值是啥了，来一起看看吧： 比如这是我想要的效果 很简陋，但是调试嘛，就先这样吧，不要嫌弃~ 当我鼠标放上去时“阳阳”两个字的下面出现红色的块块， html代码是这样的： <body> <ul> <li class="it
position:absolute相对于谁定位
aliven1的博客
04-30 6750
1.相对定位：相对于块级元素（或行内块）自身位置进行定位； 2.绝对定位：绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）； 绝对定位元素相对的元素是它最近的一个祖先，该祖先满足：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于body进行定位 ...
position:absolute相对哪个元素定位
lzf的博客
06-01 6940
应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性（重点）！
CSS中的position属性指定元素的定位方式
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-23 573
我们使用position属性可以灵活的控制页面布局，我们常用于制作悬浮菜单、弹出框等效果，但是如果我们过度的使用会导致页面太过混乱，从而影响了用户的体验感。
position的值， relative和absolute分别是相对于谁进行定位，你真的知道吗？
yiyueqinghui的博客
09-19 9367
常见的position定位方式如下: static 默认值。元素出现在正常的普通流中 relative 生成相对定位的元素，相对于其在普通流中的位置进行偏移。 fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 iframe 进行定位。 inherit 继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。 absolute 生成绝对定位的元素， 相对于最近一级的 不是 static 的父元素来进行定位,如果没有找到的话，最
绝对定位，相对定位
ppznhy的博客
02-21 1857
绝对定位position:absolute 是相对于最近父元素进行定位的，如果最近父元素没有定位，他就会相对于根元素进行定位。而且不再占有原来位置。 相对定位position:relative 是相对自己原来位置定位，继续占有原来位置。 ...
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
10-26
这个方法只在元素的父元素已经通过CSS定位（即`position`属性被设置为`relative`、`absolute`或`fixed`）的情况下才有意义，因为它返回的坐标是相对于最近的已定位父元素的。如果父元素没有定位，`position()`返回的...
获取元素位置的position()与offset()方法区别介绍
09-25
而offset()方法则总是返回元素相对于文档的偏移量，其返回的左边距和上边距与页面在加载时的状态有关，不受父元素定位方式的影响。这意味着，即使父元素是静态定位，使用offset()方法也能得到元素相对于文档的位置。...
jquery元素相对定位插件.rar
07-04
3. **应用定位**：通过设置`position`属性为`relative`或`absolute`，然后更新`top`和`left`，将元素移动到新的位置。 4. **事件监听**：可能包含对窗口滚动、元素点击等事件的监听，以便在这些事件触发时自动调整...
CSS 绝对定位属性absolute用法初探
01-29
下面是一个简单的例子，展示了如何使用`absolute`定位元素： ```css #box_relative { position: absolute; left: 30px; top: 20px; } ``` 在这个例子中，元素`#box_relative`会被移动到离其初始位置左边30像素...
绝对定位也可触发行内元素的layout说明
12-11
但是，如果`block`也无法满足特定需求，例如需要元素浮动或者与周围元素保持相对位置，可以考虑使用`float`属性。`float`可以使元素脱离正常文档流，向左或向右移动，让其他元素环绕其周围。 当上述方法仍然不能...
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 5513
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
热门推荐
Z_CH8648的博客
11-23 3万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 position 属性指定了元素的定位类型，用于指定一个元素在文档中的定位方式。
定位position总结
beeliang
04-13 7364
1.定位position 属性值： 绝对定位 position：absolute （不保留位置 脱离文档流） （1）没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏 如果修改了元素大小 使得浏览器最大最小值改变，还是相对于之前的 并不会改变 （2）有父元素且父元素有定位，参照物是父元素 一般是设置子绝父相 可以设置top、bottom、left、right 值控制相对位置 固定定位 fixed：相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bott
CSS 有关Position = absolute (绝对定位 是相对于谁而言)
weixin_30445169的博客
09-03 164
css中有绝对定位法，以前一直搞不懂绝对定位是相对于谁而言的绝对定位。 现在搞清楚了，不是相对于父元素，也不是相对于BODY。 而是相对于所属元素树中，相邻最近的那个显示标识了position属性的元素。 比如 Code <divid="a"style="position:relative"> <divid="b"> ...
「CSS」知识点笔记：position
海到无边天作岸 山登绝顶我为峰
03-28 2005
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～ CSS position 作用 规定元素的定位类型
在html中 position默认值,CSS 中的 position 属性
weixin_42168230的博客
06-26 1580
可能对CSS 稍微有点了解的人都知道position这个属性，妈蛋不就一个position么，有毛可说的。可别小看position，position属性有那几个值，这个可是facebook 面试的第一个问题，你真能回答出来么？文字前面简单介绍了基础内容，如果你有兴趣试着回答下后面成人版的问题。儿童版position属性有几个值只是开始，当你回答之后肯定会继续让你说一说详细的，但是首先你要说出有那几...
ES6的class中的static方法和普通方法的区别
welnee的博客
09-28 2640
什么是静态（static）方法？ 类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。 class Foo { static classMethod() { return 'hello'; } } Foo.classMethod() // 'hello' var foo = new Foo(); foo.classMethod() // TypeError: foo.
能够实现相对于自己定位的属性设置是（ ）。 A position:relative; B position:absolute; C position:fixed; D position:none;
最新发布
06-12
如果你想要元素相对于自己定位，并且不影响其他元素，那么相对定位（relative）是一个合适的选择。如果需要元素完全脱离文档流，且能根据浏览器窗口移动，那么绝对定位（absolute）可以满足需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值