最近的祖先元素position为absolute/relative对后代元素的影响区别

最新推荐文章于 2022-04-09 16:51:19 发布
最新推荐文章于 2022-04-09 16:51:19 发布
阅读量157 收藏
点赞数
原文链接：http://www.cnblogs.com/cs-1996/p/9291028.html
版权

父级元素absolute/relative好像对子级元素的定位如absolute没影响，对子级有影响的是子级自己的定位方式如absolute或relative

转载于:https://www.cnblogs.com/cs-1996/p/9291028.html

weixin_30895603
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery遍历DOM元素与节点方法详解
10-22
4. `$(selector).offsetParent()`：获取最近的定位祖先元素，即CSS position属性为relative, absolute或fixed的元素。 5. `$(selector).closest(ancestorSelector[,context])`：从当前元素开始向上搜索，直到找到...
相对定位（relative）和绝对定位(absolute)
hahhahahaa的博客
06-13 1830
一：绝对定位position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对...
查找元素最近的相对位置祖先
lio-zero 的博客
07-12 172
您是否曾经遇到过 CSS 定位困境，即带有 position: absolute 的元素没有按预期进行定位？ 我们知道，在元素上设置绝对位置将使其相对于最近的祖先进行定位，最近的祖先将其 position 设置为 static 以外的值(默认值)。 两个示例显示了当父元素具有相对位置时紫色元素的位置与另一个祖先具有相对位置时紫色元素的位置 在上图中，绝对定位元素在两个示例中都使用相同的 ...
CSS学习20：absolute（绝对定位）
玉安_ZhangDe的博客
04-09 6688
绝对定位的介绍： 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。 语法： 选择器 { position: absolute; } 1、完全脱标 —— 完全不占位置； 2、父元素没有定位，则以浏览器为准定位（Document 文档）。 3、父元素要有定位 i.元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 ii.绝对定位的特点总结：（务必记住）...
position属性在父级元素和子级元素中的影响
普拉旺斯
12-11 2276
position属性在父级元素和子级元素中的影响
绝对定位和相对定位详解
热门推荐
langyixuan的博客
05-14 1万+
一：绝对定位 position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。 绝对定位与文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序。 #box_relative { position: absolute; left: 30px; top: 20px; } 二：相对定位 position: relative
元素层级1
08-08
当元素开启定位，如设置为`relative`、`absolute`或`fixed`，它们就可以拥有`z-index`值，从而在三维空间的Z轴上定义它们的层次关系。 `z-index`的值可以是任何整数，包括负数。一个较大的`z-index`值表示元素位于...
CSS快速入门关键字整理文档
最新发布
04-10
- **absolute**：相对于最近的已定位祖先元素进行绝对定位。 - **fixed**：相对于浏览器窗口固定位置。 - **sticky**：基于用户滚动位置的定位。 #### 示例分析 以下是一些 CSS 选择器的实例，以及它们的应用场景：...
前端 60 道面试题及答案.docx
07-08
* position:absolute绝对定位：是相对于元素最近的已定位的祖先元素。 * position:relative相对定位：相对定位是相对于元素在文档中的初始位置。 Flex布局： * display:flex //设置Flex模式 * flex-direction:...
position:absolute(脱离文档流、相对于祖先元素定位、如果绝对定位元素没有祖先元素,就相对于body)...
weixin_34357267的博客
11-13 930
一般将absolute元素的父元素设为relative
xyr05288的专栏
01-10 2501
css div中定位右下角为何需要父的position为relative HTML代码 <div class="A"> <div class="B"> 我是b </div> </div>css代码： *{ padding:0; margin:0;} .A{ position:relative; width:400px; height:400px; border:1px solid #000;
为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？
前端下午茶
07-27 1998
其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位，为什么一般都是用相对定位呢，因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来占的地方也不会让出来的，这样的好处是原来在它周围的其他元素不会因为它的离开
css的绝对定位与相对定位
wisher的博客
07-23 580
相对定位: 相对定位是相对于初始位置的偏移，初始位置仍然处于文档流中   对红色div相对定位后: 绝对定位: 无已定位祖先元素，以为偏移参照基准,注意不是 有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准 如果未设置偏移量，无论是否存在已定位祖先元素，都保持在元素初始位置 绝对定位后，脱离文档流 所谓已定位祖先元素，例如：     则1是2
CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？
weixin_41796631的博客
04-27 9942
问题： CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？ 搞清楚了，正确的应该是只要父级元素=设置了position值（absolute或者relative），那么子元素的position都是以父级元素来定位的。 回答： 其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，一个是“离它最近的祖先元素”，...
请教CSS中的position:relative;的作用
u010227447的专栏
06-07 8980
对于position的其它几个属性，我都搞懂了  引用 static : 　无特殊定位，对象遵循HTML定位规则  absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框  relative : 　对象不可层叠，但将依据left，right，top，
html中absolute和relative对子div的宽高的影响
weixin_42822484的博客
06-04 1187
       css中的postion是一个比较重要的样式，其中的absolute和relative不仅对自身的位置有影响，对子div的位置也会有影响。        不仅如此，对子div的宽高也有影响。        我们都知道将div的width和height设置为百分比可以实现自适应，但是有时候
position之absolute定位深入理解
风烟
03-12 8422
和float是兄弟在我们写样式的时候会发现使用float和absolute的时候，会发现都会出现高度塌陷的问题，和脱离文档流的情况，而且你如果设置了的话就会表现出类似于display：inline-block的表现形式，所以我们可以用这两个对比着记。跟随性这个是在设置了absolute之后，我们的这个元素如果在某个元素之前的话就会居高临下，好像是浮在他后面的元素上面，后面的元素会占据这个元素本来的位
一个元素同时position absolute和relative
05-25
position:absolute 表示该元素的位置相对于最近的已定位祖先元素（即设置了 position 为 relative、absolute、fixed 或 sticky 的元素），如果没有已定位的祖先元素，则相对于文档的 body 元素。 position:relative...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值