溢出元素中具有绝对位置的嵌套元素会流出并显示

时间:2011-02-20 12:09:49

标签: html css

这有点烦人。不确定这是我的错还是这是一个浏览器错误 - FF和Chrome似乎都是这样做的......

这里是JS小提琴:http://jsfiddle.net/dimitar/UF8n3/

前提:

div overflow-y: auto

其中的孩子div,显得很好

子女的孩子(div.collectibleMiniHead)与position: absolute但没有left / top值(所以相对,真的)不会保持隐藏但正在显示

我可以重构使用position: relative并且它可以工作但是这不会使错误/行为消失 - 这是正常/预期的,我是否应该把它提交给mozilla和webkit bugtrackers或者我正在做什么有什么不对吗?

2 个答案:

答案 0 :(得分:1)

我改变了

的所有四个实例
<div style="background:..height: 94px;" /></div>

<div style="background:..height: 94px;"></div>

因为自我关闭然后有另一个结束标签似乎没有多大意义。

然而,这并没有改变任何事情。

你说:

  

孩子的孩子们   (div.collectibleMiniHead)用   位置:绝对但没有左/上   值(所以相对,真的)

  

我可以重构使用位置:   相对而且它有效,但确实如此   不要让错误/行为消失

只需将position: relative添加到div.collectibleMini即可使其按照我认为您的要求运行,并且在重构方面不需要太多工作。

Live Demo(也有自我关闭divs已修复)

我想我已经优雅地解决了你的问题,或者我已经完全错了。这是希望前者!

答案 1 :(得分:0)

尝试将collectibleMiniHead添加为collectibleMiniBody的子项,并在collectibleMiniBody上添加position: relative;