Css 如何防止隐藏元素在Chrome中显示？

我今天遇到了一个奇怪的问题，在Chrome中，当我关注一个元素时，它被完全定位在溢出隐藏容器之外，它在Chrome浏览器（Mac）中可见

我用小提琴来说明这个问题：

Html

    <div id="container">
        <a id="inner-button" href="#">You can see me !</a>
    </div>

谢谢你的帮助

干杯

在“内部按钮”上使用tabindex=“-1”。这会妨碍注意力的集中。

---

这将保持它的焦点，但隐藏。你可以使用z-index:0动态地使其可见。

好吧，这太令人毛骨悚然了……即使你使用

#内部按钮：focus{right:-40px；}

它会在失去焦点时变为可见。对于信息，同样适用于FF。嗨，是的，我是来用这个解决方案的，但它会阻止焦点，这是不需要的。问题是如何在没有这种奇怪的副作用的情况下保持焦点的可用性……好吧。如果你点击它，锚定链接就会聚焦，这是屏幕阅读器或“仅键盘”导航所需的与可访问性相关的行为。这其实很正常。似乎Safari只在…上显示了全球访问帮助。。。如果要在另一个事件发生之前隐藏该内部按钮，请先使用visibility:hidden；？隐藏它？你的立场：绝对；方法目前在技术上并没有隐藏该按钮。只有可见性：隐藏；或显示：无；在聚焦时会隐藏它。i、 e.出于可访问性的原因，始终会显示一个重点链接。

#container{
    display: block;
    background: blue;
    width: 200px;
    height: 30px;
    position: relative;
    overflow: hidden;
}

#inner-button{
    display: block;
    background: red;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    right: -20px;
}

<input placeholder="focus on me then press tab" type="text">
<div id="container">
    <a id="inner-button" tabindex="-1" href="#">You can see me !</a>
</div>

#inner-button{
    display: block;
    background: red;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    right: -20px;
    z-index:-1;
}