Задать вопрос
@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>
  • Вопрос задан
  • 177 просмотров
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
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создание сайта с chatGPT
18 дек. 2024, в 12:37
10000 руб./за проект
Wordpress+Elementor правки
18 дек. 2024, в 12:22
5000 руб./за проект
Консультация по SEO
18 дек. 2024, в 11:57
500 руб./в час
Ещё заказы