V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
geelaw
V2EX  ›  问与答

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

  •  
  •   geelaw · 2017-05-28 01:30:20 +08:00 · 1859 次点击
    这是一个创建于 2723 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 的链接点不到,于是用户将无法显示全部歌词。

    现在不这样做了,我直接用 blockquotebackground 显示那个“大号引号”。

    6 条回复    2017-05-28 10:24:40 +08:00
    nlysh007
        1
    nlysh007  
       2017-05-28 08:58:00 +08:00
    css 里不应该是 z-index 么
    geelaw
        2
    geelaw  
    OP
       2017-05-28 09:20:59 +08:00
    @nlysh007 感谢提醒,这里是新的 JSFiddle: https://jsfiddle.net/augkvwb2/

    不过这并不影响问题,改成 z-index 仍然是无法点击的状态。
    nlysh007
        3
    nlysh007  
       2017-05-28 09:30:30 +08:00
    @geelaw
    #relative
    {
    position: relative;
    zindex:-1;
    }

    relative 好像是后来居上的。。。
    nlysh007
        4
    nlysh007  
       2017-05-28 09:31:48 +08:00
    @nlysh007
    写错了
    #relative
    {
    position: relative;
    z-index:-1;
    }
    P233
        5
    P233  
       2017-05-28 09:31:50 +08:00   ❤️ 1
    `div.test > a` 默认 `position: static`,`z-index` 无效,加上 `position: relative` 就可以了
    geelaw
        6
    geelaw  
    OP
       2017-05-28 10:24:40 +08:00 via Android
    @nlysh007 原因是 relative 之后建立了新的 stacking context ……

    @P233 谢谢您提供的原因😀😁
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2897 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:16 · PVG 08:16 · LAX 16:16 · JFK 19:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.