Html 制表符会导致溢出内容上移

我有一个定义了高度的div，溢出设置为hidden。如果溢出内容中有锚，则div的可见内容将向上移动，这意味着我要显示的内容将被推离div顶部，锚将移动到div可见部分的中心。没有显示滚动条（一件好事），因此内容有点卡在那里

HTML

这是小提琴。在框内单击并点击tab以了解我的意思

---

我的使用案例是，我有一个下拉菜单，其中包含我只想在用户单击“show dropdown”时显示的链接。可见内容有一个输入框，因此，如果用户从输入框中单击，则会显示链接，并且除了在整个页面中单击外，无法返回到输入框。这只能通过向所有链接添加tabindex=“-1”来解决吗？

听起来您想防止该锚点上的tabstop行为。见此：

Fiddle:

替代解决方案 发生这种情况时，应用了

溢出：隐藏
的父元素将滚动以查看聚焦元素，并且
滚动顶部
和/或
滚动左
属性将变为正整数，尽管没有滚动条

解决此问题的一种方法是使用事件侦听器，将
溢出：隐藏的
父对象的滚动位置重置回
0
，这种方法不涉及额外的标记或DOM操作

jQuery示例：

$(document).on('focus', '.some-overflow-hidden-element > *', function() {
    $(this).closest('.some-overflow-hidden-element').scrollTop(0).scrollLeft(0);
});

注意：如果要执行此操作，请确保在此过程中不会破坏您的可访问性。这通常不是最好的选择，因为隐藏的元素仍然可以通过tab之类的东西来聚焦。
出于可访问性的原因，这是为了让那些只使用键盘的人能够操作计算机。也许你可以给链接
显示：none
，然后在“show dropdown”时将其切换回原来的状态我最初是这样做的，但是因为我使用CSS动画来显示高度，所以链接只有在动画完成后才会“弹出”。如果不是这样的话，那应该行。是的，在我的操作中，我指的是tabindex=“-1”而不是tabindex=“0”。我希望有另一种方法（仅限于css）可以解决这个问题，如果链接被显示，用户仍然可以使用tab键进入链接，但是jQuery方法应该可以解决这个问题。谢谢非常感谢！只需要添加溢出：隐藏，以防止我的导航标签转移时，标签重点向上！
.container{
    height: 100px;
    overflow: hidden;
    border: 1px solid black;
}
.show-content{
    line-height: 100px;
    height: 100px;
    font-size: 16px;
}
.overflow-content a{
    display: block;
    margin-top: 40px;
    line-height: 20px;
    font-size: 16px;
}

<div class="container">
    <div class="show-content">Click in the box and hit tab</div>
    <div class="overflow-content">
        <a href="javascript:void(0);" tabindex="-1">Pesky Link</a>
        <a href="javascript:void(0);" tabindex="-1">Pesky Link 2</a>
    </div>
</div>

$(document).ready(function(){
    $('div.overflow-content a').attr('tabindex', '-1');
});

$(document).on('focus', '.some-overflow-hidden-element > *', function() {
    $(this).closest('.some-overflow-hidden-element').scrollTop(0).scrollLeft(0);
});