#parent {
position: relative;
}
#child {
position: absolute;
top: 0;
left: 0;
}
这一切都很好,但是当父级的display属性设置为table-cell时,它在Firefox中不起作用.子元素的定位上下文将是其父元素上方最接近的定位祖先.
值得注意的是,这适用于其他地方.在IE8,IE9,Safari,Chrome&歌剧.
请看这里的小提琴：http://jsfiddle.net/RZ5Vx/
另请参阅this fiddle with the parent’s display set to inline-block,它在Firefox中可以使用.
解决方法
div {
display: table; /* this line */
line-height: 28px;
padding: 0 20px;
background: #ddd;
position: relative;
}
注意：
由于您没有表格,请设置它.
您可以在显示声明中看到此quirksmode.
EDITED
它从W3C recommendation :: Tables开始
The computed values of properties ‘position’,‘float’,‘margin-*’,‘top’,‘right’,‘bottom’,and ‘left’ on the table element are used on the table wrapper Box and not the table Box; all other values of non-inheritable properties are used on the table Box and not the table wrapper Box. (Where the table element’s values are not used on the table and table wrapper Boxes,the initial values are used instead.)
EDITED
要根据问题的要求包含对评论的处理：
So,
is this a bug? If so,is there anyway to work around it?
可能的解决方法是：
用div作为位置包裹元素：relative; See Fiddle!
#wrapper {
position: relative;
}
注意：最实用的解决方案！
用div作为位置包裹内部元素：relative; See Fiddle!
#innerWrapper {
position: relative;
}
注意：需要在innerWrapper上声明原始元素的一些定义！
