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

Question

当你有一个带有“position:relative;”的元素时，我偶然发现了 Chrome 和 Firefox 中发生的一种奇怪行为和“溢出：隐藏；”和一个带有“位置：绝对；”的锚。

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

示例：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。