0

Galera, quero deixar um vídeo na página inicial do site que estou criando com HMTL E CSS, mas quando eu clicar em alguma opção do menu sidebar, a section faça a transição sobrepondo meu video, no caso deixando ele no fundo. Mas o que está acontecendo é o contrário. Deixei a parte do html do header e do iframe logo abaixo, pesquisei sobre e vi que é uma function toggle em javascript que me falta. Alguém Me ajuda?

Página inicial do meu site Video Sobrepondo a section

<body>
  <div id="IframePosicao">
    <iframe width="800" height="451" 
     src="https://www.youtube.com/embed/JMJUUHDhRcA" 
     frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> 
     </iframe>
  </div>

<header id="sidebar">
    <h1>NT GAMES</h1>
    <nav>
        <ul>
            <li id="link-home"><a href="#home">Home</a></li>
            <li id="link-empresa"><a href="#empresa">Empresa</a></li>
            <li id="link-servico"><a href="#servico">Serviços</a></li>
            <li id="link-contato"><a href="#contato">Contato</a></li>
            <li id="link-restrito"><a href="#restrito">Restrito</a></li>
        </ul>
    </nav>
</header>

css:
div#IframePosicao {
  position: absolute;
  overflow:auto;
  top: 30%;
  left: 45%;
  z-index: 5;
  margin-top: -155px;
  margin-left: -200px;
}

header{
    width: 25%;
    background: #fff;
    position: absolute;
    float: left;
    left: 0;
    top: 5%;
    z-index: 5;
}

1

1 Resposta 1

0

Olá! Nesse caso, o que falta é provavelmente uma instrução quanto à ordem das camadas de conteúdo na página. Essa informação é dada através da z-index. Tente alterar o seguinte:

div#IframePosicao {z-index: -1;}
header{z-index: 5;}

1
  • Muito Obrigado! Commented 24/03/2019 às 1:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .