CSS绝对定位噩梦 - 浏览器差异

Question

我有一些代码可以让我在其中弹出几个div个。

我在Firefox中获得了完美的像素，然后意识到所有其他浏览器（未在IE中测试过）都已关闭。

有人能告诉我或给我一篇关于不同浏览器如何处理绝对定位元素以及如何纠正我的困境的文章？

以下是my original code，此处为my new code。

这就是我所看到的：

Answer 1

在所有浏览器中，绝对定位的定义方式相同。

元素绝对定位于相对/绝对定位的父元素或体元素（如果不是这样）。

Answer 2

在IE9，Chrome 17和FF9中对我很好。添加相对于div的位置#userControls将确保您相对于其父节点定位绝对节点。

Answer 3

我弄清楚我做错了什么。我在div标记周围创建了p，然后将宽度设置为我想要的宽度，因为在使用p周围的填充计算空间之前，这是我更新的代码，完美无缺！ （我希望）

更新了代码： DEMO

---

修改 我在每个可见框（你点击以显示隐藏的框）之外有隐藏的框，所以当我试图定位它们时，要确定它们的位置并不容易。 DOM，但是如果你将隐藏框分别设置为可见框的子框，那么你可以使用position: relative; CSS属性将子框完全放在你想要的位置他们！

<强> CSS

.visibleBox{
     position: relative;
}

.hiddenBox{
     position: absolute;
     bottom: 0; 
     right:0;
}

<强> HTML

<div class="visibleBox">
    <p class="hiddenBox">I am hidden sometimes<p>
</div>

所以我想说的是我在P之外有DIV，这使得在所有浏览器中正确定位它变得非常尴尬但是使用父和子相对和绝对的位置它解决了我的问题。