CSS position: relative 会导致 DOM 里排在前面位置的元素无法被碰撞测试？
geelaw · 2017-05-28 01:30:20 +08:00 · 2171 次点击这是一个创建于 3121 天前的主题，其中的信息可能已经有所发展或是发生改变。
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 显示那个“大号引号”。
 |
1
nlysh007 2017-05-28 08:58:00 +08:00
css 里不应该是 z-index 么
|
 |
2
geelaw OP |
|
3
nlysh007 2017-05-28 09:30:30 +08:00
|
 |
5
P233 2017-05-28 09:31:50 +08:00  1
`div.test > a` 默认 `position: static`，`z-index` 无效，加上 `position: relative` 就可以了
|
Select Language