1

Tengo un error en mi cabecera fixed y es que a la hora de poner hipervínculos, aún poniendo el z-index, éstos no se muestran mientras que el texto normal si.

Este es el código:

.fixedback{
    
        width: 150%;
        background-color: black;
        position: fixed;
        height: 10%;
        margin-left: -50%;
        top: 0;
        margin-top: auto;
        z-index: 1;
    
    }
    
    .baloncesto{
    
        position: sticky;
        color: white;
        z-index: 2;
        margin-top: 1vw;
        text-align: center;
        font-size: 2vw;
    
    }
    
    .nba{
    
        color:white;
        position: fixed;
        text-decoration: none;
        top: 0;
        display: flex;
        line-height: 100px;
        font-size: 1vw;
        font-weight: bold;
        z-index: 2;
    }
<class>

        <div class="fixedback">
        <h1 class="baloncesto">Baloncesto</h1>
        </div>
        <a href="https://es.nba.com/?gr=www" class="nba">NBA</a>
        <a href="https://www.nbastore.eu" class="NBAStore">NBA Store</a>
        
    </class>

La cosa, es que el hipervínculo no se muestra encima de la cabecera fixed mientras que el texto normal "baloncesto" si, no entiendo de donde puede venir este error, solo estaba intentando centrar verticalmente los elementos en el div.

1
  • Muchas gracias por tu ayuda, me has hecho aprender mucho sobre estructuras! Commented el 7 oct. 2021 a las 8:20

2 respuestas 2

0

El css impide por usar position fixed en el .nba, lo que sucede es que esta propiedad en css elimina del flujo normal al elemento en la pantalla. Para centrar verticalmente un elemento usas el disply:flex así:

<nav style="display:flex; align-items: center">

    <div>
      <h1 class="baloncesto">Baloncesto</h1>
    </div>
    <div>
      <a href="https://es.nba.com/?gr=www">NBA</a>
    </div>
    <div>
      <a href="https://www.nbastore.eu">NBA Store</a>
    </div>
    
</nav>

este nav lo pones en un position:fixed donde el top sea de 0 y el max-width:100%, así mantendrías el header centrado verticalmente y fijo en la parte superior de la pantalla. Si te quedas con alguna duda comenta y te respondo.

1
0

Haciendo negativo el z-index: -1 de la clase .fixedback, se soluciona.

.fixedback{
    
        width: 150%;
        background-color: black;
        position: fixed;
        height: 10%;
        margin-left: -50%;
        top: 0;
        margin-top: auto;
        z-index: -1;
    
    }
    
    .baloncesto{
    
        position: sticky;
        color: white;
        z-index: 2;
        margin-top: 1vw;
        text-align: center;
        font-size: 2vw;
    
    }
    
    .nba{
    
        color:white;
        position: fixed;
        text-decoration: none;
        top: 0;
        display: flex;
        line-height: 100px;
        font-size: 1vw;
        font-weight: bold;
        z-index: 2;
    }
    
  
    <class>

        <div class="fixedback">
        <h1 class="baloncesto">Baloncesto</h1>
        </div>
        <a href="https://es.nba.com/?gr=www" class="nba">NBA</a>
        <a href="https://www.nbastore.eu" class="NBAStore">NBA Store</a>
        
    </class>

Ejecuta el código y pruébalo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.