CSS – Link kann nicht angeklickt werden, wenn absolute Position verwendet wird

Lesezeit: 3 Minuten

Benutzer-Avatar
huong

Hier ist das HTML-Skript meines Headers:

<div class="header">
<div class="logo"><a href="https://stackoverflow.com/questions/10663267/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>

Und hier ist das CSS-Skript:

.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;
}

Irgendwie die Einloggen Der Link ist nicht anklickbar, aber wenn ich die absolute Position entferne, funktioniert es normal. Gibt es eine Möglichkeit, den Link zum Laufen zu bringen und gleichzeitig die Position beizubehalten? Jeder Vorschlag ist willkommen und vielen Dank im Voraus.

-Bearbeiten- Es stellt sich heraus, dass das Problem woanders liegt. Eigentlich verwende ich Masterpage und habe damit eine Standard-ASP-Seite erstellt. Das Problem tritt nur auf, wenn ich diese ASP-Seite teste, nicht die HTML-Datei, die ich zum Erstellen der Masterpage verwendet habe. Tut mir leid, wenn ich kompliziert klinge, aber ja, das Problem ist irgendwie kompliziert für mich. Hoffentlich kann mir jemand den Grund nennen.

  • Gerade getestet, es ist anklickbar! Sie müssen weitere Informationen zum Rest Ihres Codes angeben! Das Problem kommt nicht von dem, was Sie zu Ihrer Frage haben!

    – Zuul

    19. Mai 2012 um 7:34 Uhr


  • Sie sollten auch eine Liste von Brosern/Betriebssystemen beifügen, auf denen Sie dies getestet haben. Es kann auf eine einzigartige Kombination davon beschränkt sein, insbesondere angesichts des Kommentars von zuul

    – Steve Robillard

    19. Mai 2012 um 7:36 Uhr


  • jsfiddle.net/Wh2sK – Funktioniert bei mir.

    – Madaras Geist

    19. Mai 2012 um 7:37 Uhr

  • Okay, das ist seltsam, denn wenn ich es in einer HTML-Datei teste, funktioniert es normal, aber wenn ich es mit VisualStudio teste (ich arbeite mit ASP.NET), tritt das Problem auf. Ich habe jedoch keine Ahnung, warum.

    – huung

    19. Mai 2012 um 7:42 Uhr

Versuchen Sie, hinzuzufügen z-index:10; zu .toplink{...} Klasse.

  • mit z-index Sie geben das Layering-Layout an. Es ist so etwas. Element mit z-index: x bleibt auf der Oberseite der Elemente mit z-index: (less than x) und hinter den Elementen mit z-index: (greater then x). Ich hoffe, es ist mir gelungen, Sie verständlich zu machen.

    – Krishanu Dey

    19. Mai 2012 um 8:09 Uhr

  • Vielen Dank für die Erklärung! Ich hoffe, dass Sie meine dumme Frage nicht stören, aber ich frage mich immer noch, welches Element oben auf dem Hyperlink geblieben ist, bevor ich den Z-Index-Wert für die Toplink-Klasse festgelegt habe.

    – huung

    19. Mai 2012 um 8:34 Uhr


  • ja das ist es. Es scheint standardmäßig in den Hintergrund zu geraten

    – Schrittmacher

    11. Februar 2019 um 1:58 Uhr

Ich habe eine Schaltfläche in einem absolut positionierten Div und hatte dieses Problem. z-index war nicht genug, ich benutzte pointer-events: all stattdessen.

1140070cookie-checkCSS – Link kann nicht angeklickt werden, wenn absolute Position verwendet wird

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy