html - 我怎样才能修复大纲并不总是在最上面

Question

目前，我正在尝试创建一个 <a> 的内联集看起来像按钮的标签。这些按钮的样式总是在它们周围有一个边框，但我必须设置 margin-left: -1px以确保边框像表格一样“折叠”。

当按钮有 :focus 时一切正常因为我想围绕 <a> 画一个轮廓.如下图所示，除了隐藏的右侧边缘外，轮廓是完美的。

我正在尝试创建一个漂亮的样式分页控件。按钮布局如下:

<ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    ...
</ul>

有谁知道为什么会发生这种情况以及我该如何补救？

注意:我提供的代码数量有限，因为它是生产代码。我将尝试提供人们临时需要的尽可能多的信息。

Answer 1

这个问题可以通过使用 HTML 元素的 z-index CSS 属性来解决。

在这种特殊情况下，在 a:focus 上使用 z-index: 1 和 position: relative 将提供正确的显示。

感谢@FabrizioCalderan 的最终回答。