html - :before element overlapping child elements

Question

我无法理解绝对定位的 :before 元素。我在一个大引号后面坐在推荐书后面。我使用了 :before 元素，因为它是一种字体，因此可以针对 Retina 显示器进行扩展，为图像节省了一个额外的 http 请求(我没有任何其他可以用来制作 Sprite 的图像)，而且它还为我提供了更大的灵 active 位置(背景图像需要在元素的左侧填充，这意味着玩弄我的网格并在我使用 CSS 的其他页面之间失去一致性)。

希望这是有道理的!我遇到的问题是 :before 元素覆盖了它上面的文本。如果只是文本问题不大(尽管仍然是个问题)，但那里有一个链接不能完全点击……

这是我的问题的 jsFiddle: http://jsfiddle.net/tempertemper/KzQZQ/

我假设 :before 在 li 元素上，它会位于 blockquote 后面并引用，但看起来情况并非如此。

我已经尝试过 z-index，但似乎无法使它全部正常工作。我也尝试过更改 blockquote 和 cite 的位置值，但没有成功。

感谢您的关注:)

Answer 1

我确实也注意到了 Chrome 中的问题。只需向 :before 添加背景，您就可以真正看到发生了什么(我经常使用的技巧)，或者您可以在 Firefox 中尝试 3D View 。您的怀疑是对的，支架实际上位于连杆的顶部。这是有道理的，因为在应用 css 之前呈现 DOM。不过，添加 z-index 确实解决了问题。我更新了你的 fiddle :http://jsfiddle.net/KzQZQ/1

这应该可以解决。奇怪的是这对你不起作用，但也许你做错了什么......如果你对此有任何问题，请告诉我们。