Задать вопрос
@Alianos
html

Почему div исчезает при нажатии tab?

Здравствуйте, при нажатии кнопки таб 2 раза, появится window2, вместо window1, почему это происходит?
Никаких слушателей нажатий на JS нету. Как возможно поправить это поведение в браузере?
<!DOCTYPE html>

<body>
    <div>
      <button>Window1</button>
    </div>
    <div>
      <button>Window2</button>
    </div>
</body>
<style>
  body {
    display: flex;
    flex-direction: row;

    width: 100%;
    position: relative;
    overflow: hidden;
  }

  div {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;

    width: 100%;
  }
</style>

</html>

<code lang="html">
Благодаря "Tema" вариант без багов <code><body>
    <div>
      <button>Window1</button>
    </div>
    <div>
      <button>Window2</button>
    </div>
</body>
<style>
  body {
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  div {
    position: absolute;
    width: 100%;
  }
  button{
  width: 100%;
  }
</style>
</code>
  • Вопрос задан
  • 163 просмотра
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 1
TemaSM
@TemaSM
Fullstack, DevOps, InfSec
Это происходит потому что классу .body задан режим отображения в виде display: flex с направлением flex-direction: row - таким образом два элемента выстраиваются на странице друг за другом в ряд по горизонтали (row), а свойство overflow: hidden скрывает содержимое выходящее за границы элемента, которому был назначен класс .body.
Отключив свойство overflow через DevTools браузера или в коде, увидите ту самую вторую кнопку (её маленький кусочек), а на странице в браузере появится горизонтальный скроллбар. Либо можно через DevTools просто навести на второй div и браузер подсветит где этот элемент находится в окне, скриншот:
609818e60650e671540025.png
Почему при нажатии tab одна кнопка будто пропадает, а другая появляется?
- потому что при помощи tab вы изменяете фокус с одного элемента на другой, и браузер автоматически фокусирует вас на вторую кнопку, учитывая при этом значение свойства overflow - оно как раз и скрывает от нашего взора вторую, не "активную" кнопку (потому что она становится за пределами фокуса, и не вмещается в текущий viewport страницы).
Как исправить это поведение в браузере?
- способов несколько и зависит от того что хотите в итоге получить.
Но пожалуй самыми правильными в рамках текущего кода будут один из этих:
  1. Установить значение column в свойство flex-direction у класса .body60981b2c2c938810907091.png
  2. Убрать свойство flex-shrink у CSS селектора .body>div, тогда браузер не будет пытаться переносить элементы на новую строку/колонку согласно настройкам flex
    60981bd9cca60364324714.png
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка проекта сайт-форум.
16 апр. 2024, в 16:59
50000 руб./за проект
Сделать верстку, в которой можно растягивать картинку
16 апр. 2024, в 16:52
10000 руб./за проект
Сделать лендинг, переработать существующий логистический сайт
16 апр. 2024, в 16:34
30000 руб./за проект
Ещё заказы