`
zhangyaochun
  • 浏览: 2611228 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

position为relative的限制

阅读更多

 

 

    本文主要来自: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无法冲破的等级

    这是因为当两个元素的`position`都为`relative`或`absolute`时,它们之间的层级关系主要由它们在文档中的先后顺序决定,而不是由`z-index`值决定。具体来说,对于同级元素而言,后来者会覆盖前者。 #### 解决方案 ...

    CSS让子容器超出父元素(子容器悬浮在父容器效果)

    前言 有时候,我们需要如下图这样一个悬浮效果需求: 实现 在标准的正常的情况下,只能使用 绝对定位 来完成。 ... position:relative;/*父元素>相对定位*/ } #b{ width: 150px; height:50px;

    关于CSS absolute与relative不得不说的话

    然而,当在父容器中加入relative定位后,图片的绝对定位就受到了限制,它会相对于这个设置了relative的父容器进行定位。 文章进一步探讨了在某些情况下,即使使用了margin负值,absolute定位的元素也可能被相对定位...

    如何控制网页层的相对位置

    在这个例子中,`.f1` 类设置为`position: relative;`,这意味着任何包含此类的元素都将采用相对定位。`clip: rect();` 是用于限制元素可见区域的属性,在这里设置为空的矩形表示不裁剪元素,即元素的全部可见。 ###...

    Div CSS absolute与relative的区别小结

    在定位的众多属性中,CSS的position属性的两个值:absolute和relative,是经常被使用的。它们各自有着独特的特性以及应用场景。 首先,我们需要了解什么是绝对定位(absolute)和相对定位(relative)。绝对定位是...

    CSS实现模拟position的fixed页面定位效果

    为了使其在页面滚动时保持在屏幕上的固定位置,我们将其父元素设置为 `position: relative`,这样 `.fixed` 就相对于其父元素定位。然后,我们将 `.fixed` 的 `top` 和 `left` 属性设置为其在页面上的理想位置。 ...

    css常见定位属性的使用

    在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一个元素都被文本流所限制了自身的位置,但是...

    css元素常见定位应用.html

    在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一个元素都被文本流所限制了自身的位置,但是...

    Table锁定行列

    - `tr` 和 `td` 元素设置为 `position: relative`。 - 使用 `top` 和 `left` 属性控制元素的位置。 - IE浏览器对 `tr` 和 `td` 的 `position: relative` 支持良好,但在其他现代浏览器(如Firefox 4和Chrome)中...

    解决iframe中fixed失效的问题

    - 一种常见的技巧是将 `iframe` 的 `position` 设置为 `relative` 或 `absolute`,并将其 `z-index` 设置得很高,使 `fixed` 元素能够覆盖 `iframe` 的边界。 - 将 `iframe` 的 `scrolling` 属性设置为 `no`,然后...

    日期跟随文字限制

    1. **使用`position`属性**:设置`position`为`relative`或`absolute`。如果文字内容在一个相对定位的`div`里,我们可以将日期元素也设置为绝对定位,并根据文字内容的宽度来调整日期的位置。例如,可以使用`right`...

    jquery实现限制textarea输入字数的方法

    jquery怎么实现限制textarea输入的字数呢?有需要的朋友可以参考一下我写的例子,当然如果有误,也希望大家能... position: relative; width: 730px; } .container span{ position: absolute; bottom: 20px; ri

    IE7 设置z-index的覆盖问题的解决方法

    例如,在IE7浏览器中,以下HTML结构中,尽管red元素的z-index被设置为100,理论上应该覆盖z-index为10的black元素,但实际上,由于父级元素使用了position:relative,导致black元素覆盖了red元素。 ```html ...

    IE6 Bug overflow:hidden失效

    尽管这个解决方案在大多数情况下有效,但需要注意的是,为父元素添加`position:relative`可能会影响到页面的其他布局和定位。因此,使用这种方法时需要谨慎,确保它不会引入新的兼容性问题或破坏原有的设计。 此外...

    jquery右侧跟随悬浮固定窗口

    2. **CSS基础样式设置**:为要悬浮固定的元素添加初始样式,通常设置`position: relative`。当滚动事件触发时,将改为`position: fixed`。 ```css #floating-widget { position: relative; top: 0; right: 0; ...

    CSS中如果固定定位只给出了定位模式position:fixed,没给出边位移引发的问题

    定位涉及到`position`属性,它有多个值,如`static`、`relative`、`absolute`和`fixed`。本篇文章将重点讨论在使用`fixed`定位时只指定`position: fixed`而忽略边位移所引发的问题。 首先,我们需要理解定位的基础...

    position:fixed或absolute时百分比参考屏幕宽度

    position属性的值通常可以是static、relative、absolute、fixed以及后来新增的sticky。当使用position:fixed或position:absolute的时候,元素的定位将会脱离常规文档流,而此时如何设置元素的宽度和位置就变得稍微...

    CSS实现垂直居中的几种实现方式.docx

    position: relative; width: 400px; height: 400px; border: solid 1px gray; } .vertical { height: 100px; width: 100px; border: solid 1px gray; position: relative; top: 50%; margin-top: -50px...

    随着滚动条,小广告也滚动的做法.rar

    2. **CSS 样式**:初始状态下,设置广告元素的`position`为`relative`,以便在未滚动时正常显示在页面中。 ```css #stickyAd { position: relative; width: 300px; /* 自定义宽度 */ height: 250px; /* 自定义...

    IE6 position:fixed bug (固定窗口方法)

    因此,当HTML元素设置为`position:relative`时,`position:absolute`可能无法达到预期效果。 解决这个问题的一个策略是让body保持其原有高度,同时限制html元素的高度仅为窗口大小,并隐藏body之外的垂直滚动条。...

Global site tag (gtag.js) - Google Analytics