Position menu over image with CSS

Asked

Viewed 2,370 times

1

How to leave the menu fixed and on the background imaging?

<hearder>
  <img src="imgs/principal.jpg" alt="estilo">
  <nav id="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Consultoria de imagem</a></li>
      <li><a href="#">Outros Serviços</a></li>
      <li><a href="#">Sobre</a></li>
      <li><a href="#">Contato</a></li>
    </ul>
  </nav>
  <p>Valorize sua essencia, crie sua melhor versão!</p>
</hearder>
css

2 answers

2

As in the order of your HTML the tag <img> come before the tag <nav> naturally the Nav is already above the image, no need to z-index. Already the menu vc can fix using position:fixed or position:sticky

Dry an example with exactly your HTML, I just used some CSS classes to get better presented.

body {
  margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333;
    top: 0;
    width: 100%;
    position: fixed; 
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: red;
}

header img {
  height: 200px;
  width: 100%;
}
<header>
    <img src="https://placecage.com/100/100" alt="estilo">
    <nav id="menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Consultoria de imagem</a></li>
        <li><a href="#">Outros Serviços</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
      </ul>
    </nav>
    <p>Valorize sua essencia, crie sua melhor versão!</p>
</header>

<div style="height:2000px; width:100px">
</div>

1

Use position: fixed; in your menu css, it can be inline (in the code line) or external (separate file), follow the example with inline css:

<header style="position: fixed;">
        <img src="imgs/principal.jpg" alt="estilo">
        <nav id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Consultoria de imagem</a></li>
        <li><a href="#">Outros Serviços</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
</header>

now if you want to do external can do so: 

.menu {
  position: fixed;
}
<header class="menu">
        <img src="imgs/principal.jpg" alt="estilo">
        <nav id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Consultoria de imagem</a></li>
        <li><a href="#">Outros Serviços</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
</header>

Now if you want something on top of everything, use in css z-index: 9900;, z-index is priority order, the largest number will be on top. (is that in your question was insira o código aqui).

Well that’s it, anything let me know!

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.