position为relative的限制

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

#position #relative #css

本文探讨了CSS中相对定位(relative positioning)的概念及其如何应用于不同类型的HTML元素。特别指出，在表格元素如table-row-group等上使用相对定位的效果是未定义的，并提供了一种通过在表格单元格内部嵌套div元素来实现相对定位的方法。

 

 

    本文主要来自：http://www.planabc.net/2008/08/13/limited_use_of_position_relative/

 

    下面的文案注释来自：http://www.w3.org/TR/2006/WD-CSS21-20061106/visuren.html#propdef-position

 

relative

The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

 

 

    table定义position:relative属性无效。  可以给td加div，给div再设置

 

 

position:relative/absolute无法冲破的等级
10-31
这是因为当两个元素的`position`都为`relative`或`absolute`时，它们之间的层级关系主要由它们在文档中的先后顺序决定，而不是由`z-index`值决定。具体来说，对于同级元素而言，后来者会覆盖前者。 #### 解决方案 ...
position：relative
热门推荐
weixin_44874595的博客
07-30 5万+
1.当将块的position属性设置为relative时，与设置为absolute完全不同，这时子块是相对于其父块来作为参照对象偏移定位，而不是相对于浏览器窗口，并且相对定位的块元素脱离标准流浮上来后，无论是否进行移动，其所占的位置仍然留有空位，后面的无定位块元素不会移动上来，因此，移动元素会导致覆盖其它框。 <!DOCTYPE html> <html lang="en">...
position:relative 的深入理解，欢迎探讨
mixer_a的专栏
05-25 407
对于css中的position:relative;我始终搞不明白它是什么意思，有什么作用？ 对于position的其它几个属性，我都搞懂了 引用 static : 　无特殊定位，对象遵循HTML定位规则 absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边...
神奇的position:relative;
weixin_34408717的博客
07-17 339
我承认我又标题党了，这里想说的是相对定位的设置有时候会起决定性的作用，比如在是否随滚动条移动时的控制。 先上两个示例： position:static; .parent{ display:block; /*position:relative;*/ width:200px; height:100px; overflow:auto; background:lightblue; } .pa...
position之relative
lbs311709000127的博客
01-18 6748
position：relative 作用：是元素成为containing-block，可定位的祖先元素。意思就是绝对定位是的参照元素 特点： 可以使用top|right|bottom|left|z-index进行相对定位，相对的是常规流中自己的位置。 相对定位元素不会离开常规流，意思就是其原来的位置还在，不会被其他后面的元素占有 任何元素都可以设置为relative，...
position:relative 详解
湛庐无方
03-04 6422
position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位. relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了，那么他原来的位置也就不存在了， 如果被定义成rela
position: 'sticky'如何实现吸定位为position: relative的大盒子的底部
07-12
当希望实现一个子元素在滚动过程中始终吸附在其父容器（设置为 `position: relative`）底部时，可以结合 `position: sticky` 和 `bottom` 属性来达成目标。需要注意的是，父容器不能具有 `overflow: hidden` 或 `...
.nvue不支持Web 中的position: absolute和position: relative吗
最新发布
07-27
这对于创建包含绝对定位子元素的容器非常有用，因为父容器通常需要设置为 `position: relative` 来作为子元素的定位参考点 [^4]。 然而，在使用过程中需要注意一些限制和特性： - nvue 的布局引擎是基于 Weex 的，...
overflow: hidden; position: relative; }
05-09
### CSS `overflow:hidden` 和 `position:relative` 的用法及常见问题 #### 1. 基本概念 CSS 属性 `overflow:hidden` 表示如果元素的内容超出了其边界框，则超出的部分会被裁剪掉，不会显示出来。而 `position:...
position: relative;overflow: hidden
05-25
position: relative;overflow: hidden; 是CSS中的样式属性，它们可以同时应用于一个元素。 position: relative; 表示相对定位，即元素的位置是相对于其原本的位置进行调整。使用这个属性后，可以通过 top, bottom, ...
操作元素之修改样式属性
leechoy
06-12 819
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
浅谈position:relative
weixin_30292843的博客
09-01 387
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> ...
position:relative相对定位
MingleHDU的博客
05-11 502
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
Position属性之relative用法
evilcry2012的专栏
11-24 2万+
Position属性之relative用法 投稿：mrr 字体：[增加 减小] 类型：转载 时间：2015-12-14 我要评论 Relative是position的一个属性，是相对定位，通过本篇文章给大家介绍Position属性之relative用法，对position属性relative相关知识感兴趣的朋友一起学习吧 Relat
position:relative的用法
波西塔塔博客
12-25 1万+
position:relative日常应用的时候一般是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素… 比如要实现商品细节图展示的效果，可以使用如...
【转】Position定位：relative | absolute
aixin8756的博客
12-08 202
转自 http://hi.baidu.com/763843175/blog/item/4955a752c64cd40b3b2935f3.html 定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。 定位的定义：在CSS中关于定位的内容是： position:relat...
CSS 元素的定位之相对定位 position: relative
歪脖先生的博客
02-21 1万+
定位在CSS中，通过 position属性来对元素进行定位，可选的定位类型有 static | relative | absolute | fixed，默认值为 static，表示没有定位，元素保持在它原本应该在的位置上。要对页面元素使用定位技术，必须 position属性设置为 static 之外的其它 3 个属性值，即相对定位、绝对定位、固定定位。相对定位当一个元素的 position属性设置...
CSS属性详解——position:relative
Wod_7的博客
06-04 6661
CSS中的相对定位relative定位是一种定位方式，与绝对定位absolute定位不同的是，相对定位是根据元素在正常页面流中的位置来定位。相对定位使元素相对于其原始位置上下左右移动。这个过程并不会使元素脱离文档流。
CSS- 4.2 相对定位（position: relative）
HRDMN的博客
05-17 1449
本文讲述相对定位（position: relative）是CSS定位属性中的一种，它允许元素相对于其正常文档流中的位置进行偏移，同时保留其在文档流中的原始空间。相对定位的元素会保留原始空间，位置只是相对于自身的偏移，且不影响其他元素。下面跟小编开始今日的练习吧！
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值