Блог

Главная - Вопросы по программированию - Панель навигации не работает на фоне видео

Панель навигации не работает на фоне видео

#html #css

#HTML #css

Вопрос:

Я новичок в HTML и CSS, поэтому, пожалуйста, извините, если мой код ужасен.

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

Я заметил, что когда я удаляю навигационный class="navigation" код, он превращает его в простую панель навигации, но я могу щелкнуть по ней. (Я знаю, что это работает, потому что под текстом есть строка, например, home, discover и т.д., Когда я навожу на нее курсор мыши)

Я прикрепил фотографию того, как я хочу, чтобы панель навигации выглядела:

Кто-нибудь, пожалуйста, помогите мне.

 <!DOCTYPE html>
<html>

<head>

<title>Tourist Guide | Sweeties</title>

<header>
  <div class="header">
    <nav class="navigation">
      <a href="#" class="navbar-logo">Sweeties</a>
      <div class="navbar-right">
        <a href="#">Home</a>
        <a href="#">Discover</a>
        <a href="#">Reservations</a>
        <a href="#">About Us</a>
        <a href="#">Contact</a>
        <a href="#">About Developer</a>
        
      </div>
    </nav>
    
    <style>
    
        .navigation{
        padding-top:30px;
        padding-bottom:30px;
        position:absolute;
        top:0;
        width:100%;
        z-index:1;
    }

        .navbar-right{
        float:right;
        padding-right:10%;
    }

        .navbar-right a{
        text-decoration:none;
        padding:10px;
        color: #FFFFFF;
        font-family:Calibri;
        font-weight:900;
        font-size: 25px;
    }

        .navbar-right a:hover{
        text-decoration:underline;
    }
        .navbar-logo{
        padding-left:10%;
        font-family:Calibri;
        font-size:30px;
        font-weight:bold;
        text-decoration:none;
        color:#FFFFFF; 

    }

        .video-container {
        z-index: -100;
        width:100%;
        height:75%;
        overflow:hidden;
        position:absolute;
        top:0;
        left:0;
    }

        #video-bg{
        width:100%;
 
        }

        .portfolio-section{
        margin-top:50%;
    }
        .tagline-left{
        float:left;
        width:50%;
        text-align:center;
    }

        .tagline-right{
        float:right;
        width:50%;
        text-align:center;
    }

        .tagline-video{
        width:75%;
    }

        .tagline-right-text{
        position:absolute;
        margin-top:9%;
        text-align:center;
        margin-left:17%;
        font-family:Calibri;
        color:#FFFFFF;
        width:290px;
        font-size:40px;
    }

        .tagline-left-text{
        position:absolute;
        margin-top:9%;
        text-align:center;
        margin-left:11%;
        font-family:Calibri;
        color:#fff;
        width:375px;
        font-size:40px;
    }

</style>


        
        <style type="text/css">
            
            * {
                margin: 0;
                padding: 0;
            }

            body {
                font-family: Calibri, sans-serif;
            }

            .background-wrap {
                position: fixed;
                z-index: -1000;
                width: 100%;
                height: 100%;
                overflow: hidden;
                top: 0;
                left: 0;
            }
            
        
            #video-bg-elem {
                position: absolute;
                top: 0;
                left: 0;
                min-height: 100%;
                min-width: 100%;
            }


            .content {
                position: absolute;
                width: 100%;
                min-height: 100%;
                z-index: 1000;
                background-color: rgba(0,0,0,0.4);
            }
            .content h1 {
                text-align: center;
                font-size: 100px;
                text-transform: uppercase;
                font-weight: 300;
                color: #fff;
                padding-top: 15%;
                margin-bottom: 10px;
            }
            .content p {
                text-align: center;
                font-size: 50px;
                letter-spacing: 3px;
                color: #aaa;
            }
            
                        
        </style>
        
    </head>
    <body>
            

        <div class="background-wrap">
            <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> 
                <source src="Videos/video.mp4" type="video/mp4">
            </video>          
        </div>


        <div class="content">         
            <h1>Fiji Islands</h1>
            <p>Welcome to Fiji's #1 Tourist Guide Website</p>
        </div>

Комментарии:

1. прикрепил фотографию: i.stack.imgur.com/cL6jF.jpg

Ответ №1:

Измените z-индекс navigation класса

 .navigation{
    z-index:1001;
}

Проверьте ответ

Codepen :https://codepen.io/Rayeesac/pen/qBZRaeo

 .navigation{
    padding-top:30px;
    padding-bottom:30px;
    position:absolute;
    top:0;
    width:100%;
    z-index:1001;
}

.navbar-right{
    float:right;
    padding-right:10%;
}

.navbar-right a{
    text-decoration:none;
    padding:10px;
    color: #FFFFFF;
    font-family:Calibri;
    font-weight:900;
    font-size: 25px;
}

.navbar-right a:hover{
    text-decoration: none;
    background: #111;
    border-radius: 10px;
}
.navbar-logo{
    padding-left:10%;
    font-family:Calibri;
    font-size:30px;
    font-weight:bold;
    text-decoration:none;
    color:#FFFFFF; 

}

.video-container {
    z-index: -100;
    width:100%;
    height:75%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}

#video-bg{
    width:100%;

}

.portfolio-section{
    margin-top:50%;
}
.tagline-left{
    float:left;
    width:50%;
    text-align:center;
}

.tagline-right{
    float:right;
    width:50%;
    text-align:center;
}

.tagline-video{
    width:75%;
}

.tagline-right-text{
    position:absolute;
    margin-top:9%;
    text-align:center;
    margin-left:17%;
    font-family:Calibri;
    color:#FFFFFF;
    width:290px;
    font-size:40px;
}

.tagline-left-text{
    position:absolute;
    margin-top:9%;
    text-align:center;
    margin-left:11%;
    font-family:Calibri;
    color:#fff;
    width:375px;
    font-size:40px;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Calibri, sans-serif;
}

.background-wrap {
    position: fixed;
    z-index: -1000;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
}


#video-bg-elem {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    min-width: 100%;
}


.content {
    position: absolute;
    width: 100%;
    min-height: 100%;
    z-index: 1000;
    background-color: rgba(0,0,0,0.4);
}
.content h1 {
    text-align: center;
    font-size: 100px;
    text-transform: uppercase;
    font-weight: 300;
    color: #fff;
    padding-top: 15%;
    margin-bottom: 10px;
}
.content p {
    text-align: center;
    font-size: 50px;
    letter-spacing: 3px;
    color: #aaa;
}  
 <head>
  <title>Tourist Guide | Sweeties</title>
</head>

<body>
  <header>
    <div class="header">
      <nav class="navigation">
        <a href="#" class="navbar-logo">Sweeties</a>
        <div class="navbar-right">
          <a href="#">Home</a>
          <a href="#">Discover</a>
          <a href="#">Reservations</a>
          <a href="#">About Us</a>
          <a href="#">Contact</a>
          <a href="#">About Developer</a>

        </div>
      </nav>
    </div>
  </header>

  <div class="background-wrap">
    <video id="video-bg-elem" autoplay loop="loop" muted="muted"> 
      <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
      <source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
    </video>          
  </div>

  <div class="content">         
    <h1>Fiji Islands</h1>
    <p>Welcome to Fiji's #1 Tourist Guide Website</p>
  </div>
</body>

Комментарии:

1. Можете ли вы проверить эту демонстрацию codepen.io/Rayeesac/pen/qBZRaeo @Deondaray

Ответ №2:

Вот изменения, которые я внес в HTML, я изменил его порядок. не уверен, приемлемо ли это для вас. также на случай, если вы не хотите менять порядок. просто укажите .navigation z-индекс выше, чем .content , и это должно сработать. также

 .navigation{
    z-index:1001;
}

HTML:

   <header class="header">
        <nav class="navigation">
            <a href="#" class="navbar-logo">Sweeties</a>
            <div class="navbar-right">
                <a href="#">Home</a>
                <a href="#">Discover</a>
                <a href="#">Reservations</a>
                <a href="#">About Us</a>
                <a href="#">Contact</a>
                <a href="#">About Developer</a>
            </div>
        </nav>
        <div class="background-wrap">
            <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop"> 
                <source src="video.mp4" type="video/mp4">
            </video>
            <div class="content">
                <h1>Fiji Islands</h1>
                <p>Welcome to Fiji's #1 Tourist Guide Website</p>
            </div>
        </div>
    </header>

CSS:

 .navbar-right a {
    color: #cccccc;
    /* changed color */
}

.navbar-logo {
    color: #cccccc;
    /* changed color */
}

вот как это выглядит для меня

Результаты