CSS position: relative 会导致 DOM 里排在前面位置的元素无法被碰撞测试？

JSFiddle 在 这里。

你会发现第一个 div.test > a 是可以点击的，第二个不能（ Microsoft Edge ），区别在于第二个 div.test > a 后面的 div.test > div#relative 具有 position: relative，即使设置了相反的 z-order 也不能。

很诡异的现象，有人知道为啥么？标准怎么规定的？

我是在设置我的 blog 的样式表的时候发现的这个问题。我本来是用 ::before 来显示那个“大号的引号”的，然后对 ::before 设置背景，再加上 position 放置位置。这是因为一开始我是成对显示引号的，还会有一个 ::after 用来显示另一个引号。因为 blockquote 具有 position: relative，导致右边 float: right 的链接点不到，于是用户将无法显示全部歌词。

现在不这样做了，我直接用 blockquote 的 background 显示那个“大号引号”。