Html 相对容器问题中的 Firefox 绝对位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10267457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
firefox position absolute inside a relative container issue
提问by Krish
i am using table for displaying my dynamically generated data depend upon the user input the html structure is looks like below:
我正在使用表格来显示我动态生成的数据，这取决于用户输入，html 结构如下所示：
<table>
<tr>
<td>.....</td>
<td>.....</td>
<td style="position:relative;"> //like this i set for all td in table
<div style="position:absolute">//like this i set for all div in table
<contents>
</div>
</td>
<td>.....</td>
<td>.....</td>
</tr>
</table>
Here the div is goes to top corner of the body.all these above styles are applied throght the javascript and its working fine in chrome,IE,but not in FF like the image below.
这里的 div 位于 body 的顶角。所有这些上述样式都通过 javascript 应用，并且它在 chrome、IE 中工作正常，但在 FF 中不像下图那样。
if we change the position of the div to absolute to relative it will align correctly but i am make a hover effect while the user hover the div's for that the positions are important and this issue happens only in firefox
如果我们将 div 的位置从绝对位置更改为相对位置，它将正确对齐，但我会在用户悬停 div 时产生悬停效果，因为位置很重要，并且此问题仅在 Firefox 中发生
for your very quick reference check out the jquery http://www.malsup.com/jquery/hoverpulse/
为了您的快速参考，请查看 jquery http://www.malsup.com/jquery/hoverpulse/
i need like this have to be implemented inside the table in FIREFOX which means
我需要像这样必须在 FIREFOX 的表内实现，这意味着
Each images placed inside a td
//<td style="position:relative;">if the user hover on a td the image should pulse(Zooming effect).
- When the user hover out it should goes to the previous state.(normal size)
每个图像放置在一个 td
//<td style="position:relative;">如果用户将鼠标悬停在 td 上，图像应该会脉动（缩放效果）。
- 当用户悬停时，它应该进入之前的状态。（正常大小）
The table structure is already given above.
上面已经给出了表结构。
回答by Mr Lister
Positioning of table cells is problematic. The usual solution is to leave the style of the tdalone, and put a divin it which you make position:relative. Then place the content inside that div.
表格单元格的定位是有问题的。通常的解决方案是留下 的样式td，并div在其中放入您制作的position:relative。然后将内容放在该 div 中。
<td> <!-- no style at all -->
<div style="position:relative;">
<div style="position:absolute"> <!-- original div -->
<contents>
</div>
</div>
</td>
Edit:
I don't know which effect you're after, but here's a jsFiddle demonstrating the problem: http://jsfiddle.net/ygP7k/5/
It has a table with little absolutely positioned divs in each table cell, that are supposed to align to the bottom right corners. It works in all browsers except Mozilla ones.
编辑：
我不知道你想要哪种效果，但这里有一个 jsFiddle 演示了这个问题：http: //jsfiddle.net/ygP7k/5/
它有一个表格，每个表格单元格中几乎没有绝对定位的 div，它们是应该对齐到右下角。它适用于除 Mozilla 之外的所有浏览器。
But here is an updated one with the extra divs as I mentioned: http://jsfiddle.net/ygP7k/7/
This works exactly the same, except that it also does the trick in Firefox.
但这里是我提到的带有额外 div 的更新版本：http: //jsfiddle.net/ygP7k/7/
这完全一样，除了它在 Firefox 中也能做到这一点。
Can you work with this? Does this answer your question?
你能用这个吗？这回答了你的问题了吗？
回答by arttronics
I looked at the hoverplus jQuery pluginand the source file shows the method used:
我查看了hoverplus jQuery插件，源文件显示了使用的方法：
// parent must be relatively positioned
this.parent().css({ position: 'relative' });
// pulsing element must be absolutely positioned
this.css({ position: 'absolute', top: 0, left: 0 });
Because of this plugin's requirements and your current design needs, I recommend using .transit() jQuery pluginthat has powerful and easy to use Zoom features without such requirements.
由于此插件的要求和您当前的设计需要，我建议使用.transit() jQuery 插件，它具有强大且易于使用的 Zoom 功能，而没有这些要求。
I prepared two Table Examples, each with 9 Div'sand as you can see by the markup, it can't be any easier!
我准备了两个表格示例，每个示例都有9 个 Div，正如您从标记中看到的那样，再简单不过了！
jsFiddle DEMO of Zoomed Div's with Images in Tables
带有表格中图像的缩放 Div 的 jsFiddle DEMO
After you take a look at the jsFiddleI made for you, you can see all .transit()plugin features on the demo page HERE.
在您查看我为您制作的jsFiddle 之后，您可以在此处的演示页面上看到所有.transit()插件功能。
EDIT:The jsFiddle now has required CSS style for tdtag of position:relativeper your update.
编辑：jsFiddle 现在需要每个更新的td标签的CSS 样式position:relative。
回答by Andrea Romero
I solved the problem adding display: block;
我解决了添加的问题 display: block;
.table td div {
position:absolute;
display:block;
}
in your case:
在你的情况下：
<table>
<tr>
<td>.....</td>
<td>.....</td>
<td style="position:relative;"> <!-- like this i set for all td in table -->
<div style="position:absolute; display:block"> <!-- like this i set for all div in table -->
<contents>
</div>
</td>
<td>.....</td>
<td>.....</td>
</tr>
</table>
回答by CSS Guy
you have to add 2 div in Table 1 with position:relativeand 2nd with position:absolute
你必须在表 1 中添加 2 个 divposition:relative和 2ndposition:absolute
<td>
<div style="position:relative">
<div style="position:absolute">ddd</div>
</div>
</td>
your problem will be solved check fiddle
你的问题将得到解决检查小提琴
回答by Ryan Walton
I had a similar problem. I wrapped the problematic absolute div in an absolute div which fixed the issue:
我有一个类似的问题。我将有问题的绝对 div 包装在一个解决问题的绝对 div 中：
<div class="thumbnail" style="..position:relative;..">
<div style="position:absolute;">
<div class="thumbnail-heart" style="..position:absolute;..">
<img src="../image.png" style="float:right;position:relative;..">
...
</div>
</div>
