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

[geelaw]

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 显示那个“大号引号”。

[nlysh007]

css 里不应该是 z-index 么

[geelaw]

@nlysh007 感谢提醒，这里是新的 JSFiddle： https://jsfiddle.net/augkvwb2/

不过这并不影响问题，改成 z-index 仍然是无法点击的状态。

[nlysh007]

@geelaw
#relative
{
position: relative;
zindex:-1;
}

relative 好像是后来居上的。。。

[nlysh007]

@nlysh007
写错了
#relative
{
position: relative;
z-index:-1;
}

[P233]

`div.test > a` 默认 `position: static`，`z-index` 无效，加上 `position: relative` 就可以了

[geelaw]

@nlysh007 原因是 relative 之后建立了新的 stacking context ……

@P233 谢谢您提供的原因😀😁