Question

当我找到一个“position：relative”元素时，我偶然发现了Chrome和Firefox中发生的奇怪行为。和“溢出：隐藏;”并且在其中有一个锚点“position：absolute;”。

每当锚点获得焦点时，它上面的元素会神奇地跳到顶部，即使它的样式和标记说明了不同的故事。

示例：http://codepen.io/mediadivisiongmbh/pen/pJWmxp

您只需要一个类似于此的设置：

HTML

<div class="container">
  <h1>I can fly</h1>
  <a class="focus-me" href="#">Evil Link</a>
</div>

CSS

.container {
    position:relative;
    overflow:hidden;

    /* Optional */
    border:1px solid gray;
}

.focus-me {
    position:absolute;
}

到目前为止，感谢您的回答。为了澄清这个问题，请看一下这个例子：

http://codepen.io/mediadivisiongmbh/pen/bdRjKy

将鼠标悬停在容器上时，包含锚点的绝对定位元素将在视图中转换。当您单击它时，将打开一个灯箱（在本例中为Magnific Popup）。关闭此灯箱后，锚点再次获得焦点并跳转到视图中，这看起来很奇怪。

默认情况下将锚点设置为display:none，将鼠标悬停在容器上时display:block可以解决此问题。

Answer 1

经过更多研究后，我发现问题是由chrome中的辅助功能引起的。

在我的情况下，我只需要确保只有悬停在容器元素上时才能访问锚标记。

因此，解决方案正在改变CSS：

.container {
    position:relative;
    overflow:hidden;

    /* Optional */
    border:1px solid gray;
}

.focus-me {
    position:absolute;
    display:none;
}

.container:hover .focus-me {
    display:inline-block;
}

Answer 2

由于你有different story，我不清楚你正在寻找什么。但是，如果您的意思是由于关注链接而希望阻止跳转，则可以在链接上使用tabindex="-1"使其不接受制表位。查看Updated Pen

修改

当看到你的笔时，我认为你需要将display: none设置为你的邪恶链接，并在悬停到你的容器时将其设置为display: inline-block。检查Updated Pen。

Chrome和Firefox溢出：隐藏的跳跃元素

2 个答案: