Chrome 和 Firefox overflow:hidden 跳转元素

Question

我偶然发现了 Chrome 和 Firefox 中发生的奇怪行为，当你有一个带有 "position:relative;" 和 "overflow:hidden;" 的元素并且其中有一个带有 "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

我不太清楚你在找什么，因为你有 different story。但是如果你的意思是你想阻止因为专注于你的link而跳转，你可以在你的link上使用tabindex="-1"来让它不接受制表位。检查 Updated Pen

编辑

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

Answer 2

经过更多研究，我发现问题是由 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;
}

Chrome 和 Firefox overflow:hidden 跳转元素

Chrome and Firefox overflow:hidden jumping elements

css

firefox

google-chrome

css-position

overflow