Индикатор фокуса накрывается панелью навигации

Question

Я работаю над страницей, в заголовке которой есть две строки.

Первая строка имеет значок «Моя учетная запись», Company Lo go и Выход из системы.

Во втором ряду есть панель навигации.

Когда кольцо фокусировки / индикатор фокусировки выделяет элемент в первой строке, нижняя часть кольца фокусировки обрезается панелью навигации во втором ряду.

Мне не разрешено изменять расстояние между элементами в DOM.

Есть ли способ, которым я могу изменить наложение так, чтобы все элементы на странице не были изменены по размеру или расположению, но кольцо фокусировки не было обрезано панелью навигации ?

Сайт, созданный с помощью React.

Я пробовал поискать в Google несколько вещей, но не нашел особых указаний c на эту проблему.

Я немного новичок в программировании (моя первая работа, первый год). Я не совсем уверен, с чего начать.

Answer 1

Без примера кода трудно предложить решение, но звучит так, будто ваши две строки перекрываются и, таким образом, скрывают часть индикатора фокуса.

На ум приходят три разных решения,

1. Измените высоту и расположение двух строк, чтобы избежать наложения в первую очередь
2. Попробуйте использовать свойство CSS z-index для управления тем, какой элемент отображается в первую очередь
3. Использование свойства CSS outline-offset с отрицательным значением, например -5px, для уменьшения индикатора фокуса и, как мы надеемся, его отображения

Answer 2

Вы ищете z-index. Второй элемент расположен перед первым элементом, поэтому он покрывает индикатор фокуса.

Это позволяет указать, как далеко находятся элементы «вперед» на странице.

Предполагается, что ничего не использование позиции fixed или absolute в пределах <div> s, над которыми вы работаете, должно решить вашу проблему.

т.е.

<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>

Возможно, вам придется поиграть с z-index чтобы заставить это работать (вы можете go до 999999 без проблем, но попытайтесь использовать как можно меньшее число).

Возможно, вам также придется возиться с высотой элементов, если сайт плохо спроектирован, но без примера кода я могу предложить только общие советы и рекомендации