css - Chrome 和 Firefox 溢出 :hidden jumping elements

Question

我偶然发现了一个奇怪的行为，当你有一个带有“position:relative;”的元素时，Chrome 和 Firefox 会发生这种行为。和“溢出:隐藏；”和一个带有“position:absolute;”的 anchor 。

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

示例: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

当您将鼠标悬停在容器上时，包含 anchor 的绝对定位元素将在 View 中过渡。当您单击它时，会打开一个灯箱(在本例中为 Magnific Popup)。关闭此灯箱后， anchor 再次获得焦点并跳入视野，这看起来很奇怪。

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

Answer 1

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

在我的例子中，我只需要确保只有在将鼠标悬停在容器元素上时才能访问 anchor 标记。

因此解决方案是像这样更改 CSS:

.container {
    position:relative;
    overflow:hidden;

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

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

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