javascript - 查找内容而不是元素的位置

Question

我有一篇关于元素的文章，展示了所有不同类型的样式。

当您将鼠标悬停在每个元素上时，会出现一个可供用户操作的按钮。这工作正常，直到我添加了 float 图像。

由于 float 的工作方式，原始元素仍然到达包装器的边缘，但内容在 float 图像之后开始。

我需要找到一种方法来获取元素内容的位置而不是实际元素本身。

我正在谈论的内容的快速屏幕截图。

---

---

编辑:添加代码示例 - http://jsfiddle.net/h5P2e/1/embedded/result/


此代码示例没有我在本地拥有的一些清理功能，因此绿色按钮有时会出现在内部内联元素中。我担心的是绿色按钮出现在图像顶部，而它本应靠近段落内容。

Answer 1

您可以选择将overflow:auto 添加到内容区域中的p 和ul 标签。这将启动一个新的 block formatting context ，但它也不是没有缺点。如果您的子元素有太多边距或使用定位，则存在滚动条出现的风险，并且 float 也不会完全相同。此方法的结果是元素的边缘移到图像覆盖的区域之外。

Demo和 source