web-dev-qa-db-fra.com

CSS - Lien non cliquable lors de l'utilisation de la position absolue

Voici le script HTML de mon en-tête:

<div class="header">
<div class="logo"><a href="Default.aspx"><img src="style/images/logo.png" alt="" /></a></div>
<div class="toplink"><a href="Signin.aspx">Sign in</a></div>
<div class="search">
    <form class="searchform" runat="server" method="get">
        <input type="text" id="s" name="s" value="Search for photos" onFocus="this.value=''" onBlur="this.value='Search for photos'"/>
    </form>
</div>
</div>

Et voici le script CSS:

.logo {
    padding: 30px 0;
}

.logo img {
    display: inline;
} 

.toplink {
    position: absolute;
    bottom: 40px;
    right: 280px;
    font-size: 14px;
}

.search {
    position: absolute;
    bottom: 10px;
    right: 0;
    font-size: 14px;
    width: 330px;
}

D'une manière ou d'une autre, le lien Connexion n'est pas cliquable, mais lorsque je supprime la position absolue, cela fonctionne normalement. Est-il possible de faire fonctionner le lien tout en conservant la position? Toute suggestion est appréciée et merci d'avance.

-Edit- Il s'avère que le problème se situe ailleurs. En fait, j'utilise masterpage et j'ai créé une page par défaut ASP en l'utilisant. Le problème ne se produit que lorsque je teste cette page ASP, pas le fichier HTML qui J'avais l'habitude de créer la page principale. Désolé si cela semble compliqué, mais oui, le problème est en quelque sorte compliqué pour moi. J'espère que quelqu'un pourra indiquer la raison de moi.

htmlcsshyperlinkpositionclickable
22
huong

Essayez d'ajouter z-index:10; à .toplink{...} classe.

72
Krishanu Dey

J'ai un bouton à l'intérieur d'un div absolument positionné et j'ai eu ce problème. z-index ne suffisait pas, j'ai utilisé pointer-events: all au lieu.

1
Alican