Привязка тегов / ссылок не работает при использовании position: absolute; на моем компьютере (у меня есть видео в фоновом режиме) - PullRequest
Новая
       14

Привязка тегов / ссылок не работает при использовании position: absolute; на моем компьютере (у меня есть видео в фоновом режиме)

2 голосов
/ 27 января 2020

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

HTML

<nav class="menu">
      <a href="#" target="_blank">ABOUT</a>
      <a href="#" target="_blank">PRICES</a>
      <a href="#" target="_blank">CONTACT</a>
    </nav>

<div class="video-container">
      <video class="video-tablet" autoplay loop>
        <source src="videos/SampleVideo_720x480_1mb.mp4" type="video/mp4">
        <source src="videos/SampleVideo_720x480_1mb.webm" type="video/webm">
        Your browser does not support the video tag.
      </video>
    </div>

CSS

.video-tablet {
    display: flex;
    width: 100%;
}

.menu {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding: 1%;
    position: absolute;
}

.menu a {
     color: white;
     font-size: 20px;
     font-weight: bold;
}

.menu a:hover {
     color: #559565;
}

1 Ответ

1 голос
/ 27 января 2020

Ваша проблема здесь в том, что ваш video находится на передней панели вашей панели навигации. Поэтому, если вы пытаетесь нажать на панель навигации, вы фактически нажимаете на video, которые ничего не делают. Чтобы это исправить, вы должны сказать, что навигационная панель находится на передней панели video. Вы можете использовать для этого css с правилом z-index: 

.video-tablet {
  display: flex;
  width: 100%;
}

.menu {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding: 1%;
  position: absolute;
  z-index: 1;      /* <-- Add a z-index value to .menu */
}

.menu a {
  font-size: 20px;
  font-weight: bold;
}

.menu a:hover {
  color: #559565;
}
<nav class="menu">
  <a href="#" target="_blank">ABOUT</a>
  <a href="#" target="_blank">PRICES</a>
  <a href="#" target="_blank">CONTACT</a>
</nav>

<div class="video-container">
  <video class="video-tablet" autoplay loop>
    <source src="videos/SampleVideo_720x480_1mb.mp4" type="video/mp4">
    <source src="videos/SampleVideo_720x480_1mb.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</div>
...