Reactjs 焦点指示器被导航栏覆盖

我正在处理一个页眉中有两行的页面

第一行有“我的帐户”图标、公司徽标和注销

第二行有一个导航栏

当聚焦环/聚焦指示器高亮显示第一行上的项目时，第二行中的导航栏会切断聚焦环的底部

我不允许更改DOM上元素的间距

是否有一种方法可以更改分层，这样页面上的所有元素的大小或位置都不会改变，但焦点环不会被导航栏切断？

这个网站是用React建造的

我试过用谷歌搜索很多东西，但没有找到关于这个问题的具体答案

---

我对编程有点陌生（我的第一份工作，第一年）。我甚至不确定从哪里开始。

您正在寻找

z-index

。第二个元素位于第一个元素的前面，因此它覆盖焦点指示器

这允许您指定“前进”元素在页面上的距离

假设您正在处理的

中没有使用

fixed

或

absolute

位置，则应该可以解决您的问题

i、 e

您可能需要使用

z-index

，以使其正常工作（您可以毫无问题地转到999999，但请尝试使用尽可能低的数字）

---

如果站点设计不好，但没有代码示例，那么您可能还需要调整元素的高度，我只能提供一般性建议，并获得您正在寻找的

z-index

。第二个元素位于第一个元素的前面，因此它覆盖焦点指示器

这允许您指定“前进”元素在页面上的距离

假设您正在处理的

中没有使用

fixed

或

absolute

位置，则应该可以解决您的问题

i、 e

您可能需要使用

z-index

，以使其正常工作（您可以毫无问题地转到999999，但请尝试使用尽可能低的数字）

---

如果站点设计不好，但没有代码示例，那么您可能还需要调整元素的高度。我只能提供一般性建议，而gotcha的

没有代码示例，很难提出解决方案，但听起来您的两行重叠，从而隐藏了部分焦点指示器

我想到了三种不同的解决方案

更改两行的高度和位置，以避免第一次重叠

尝试使用cssz-index属性来控制最先呈现哪个元素

使用CSS outline offset属性和负值，即-5px，缩小焦点指示器并希望使其可见

---

如果没有代码示例，很难提出解决方案，但听起来两行重叠，从而隐藏了焦点指示器的一部分

我想到了三种不同的解决方案

更改两行的高度和位置，以避免第一次重叠

尝试使用cssz-index属性来控制最先呈现哪个元素

使用CSS outline offset属性和负值，即-5px，缩小焦点指示器并希望使其可见

---

没有代码-没有猜测如何解决形位代码。没有代码-没有猜测如何解决形位代码。不幸的是，我实际上在寻找代码中要做什么，所以我甚至不确定要发布什么样的代码示例。听起来z-index属性将是正确的路径，因为我实际上无法更改任何dom元素，缩小焦点环也不是一个选项。谢谢你的回复！不幸的是，我实际上在寻找代码中应该做什么，所以我甚至不确定应该发布什么样的代码示例。听起来z-index属性将是正确的路径，因为我实际上无法更改任何dom元素，缩小焦点环也不是一个选项。谢谢你的回复！

<div class="container">
    <div id="behind" z-index="1"></div>
    <div id="infront" z-index="0"></div> <!--The z-index is not really needed here so try without it first, it is to illustrate that the item in front at the moment should have a lower z-index than the one at the back-->
</div>