wenn div mit absoluter Position hinzugefügt wird, kann nicht auf Links geklickt werden

Lesezeit: 4 Minuten

Ich habe ein Menü auf einer Seite und ein Div, das absolut positioniert ist. Das Problem ist, dass ich, wenn sich dieses div auf einer Seite befindet, nicht auf Links in Menüelementen klicken kann.

Wenn ich dieses Div (#left_border) entferne, sind die Links wieder anklickbar.

Wieso den?

CSS:

 #left_border {
    background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 1094px;
    background-size: 100% auto;
    position: absolute;
    height: 850px;
    left: -51px;
   top: 0px;
}  

HTML:

<div id="wrapper">
<div id="content">
    <div id="left_border"></div>
    <div id="left">
        <div id="menu">
            <ul class="menu">
                <li class="item-101 current active deeper parent"><a href="https://stackoverflow.com/">Home</a>

                    <ul>
                        <li class="item-107"><a href="http://stackoverflow.com/index.php/home/news">News</a>

                        </li>
                    </ul>
                </li>
                <li class="item-102 deeper parent"><a href="http://stackoverflow.com/index.php/merchants-shops">Merchants / Shops</a>
                </li>                    
            </ul>
        </div>
    </div>       
</div>

Hier sehen Sie, dass Sie Menüpunkte nicht anklicken können: http://jsfiddle.net/Dq6F4/

Benutzer-Avatar
Kamil Kielczewski

CSS – Um die Blockierung aufzuheben, klicken Sie auf Hinzufügen #left_border Klasse folgende Aussage:

pointer-events: none 

(es ist eine Cross-Browser-Lösung einschließlich >= IE11)

Hier ist die Quelle dieser Lösung mit weiteren Informationen. Ich habe es auf Chrome, Firefox und Safari (macOs und iOS) getestet und es funktioniert 🙂

Wenn Ihnen diese Antwort gefällt Kauf mir einen Kaffee

  • Ab 2019 ist dies die beste Lösung, die ich gefunden habe.

    – Kevin Ghadyani

    12. Juni 2019 um 23:01 Uhr

  • Ich LIEBE DICH! DANKE!

    – Benutzer3779015

    17. Juli 2019 um 13:59 Uhr

  • Mann im Ernst, diese Antwort sollte wirklich als gelöste Antwort markiert werden !!! Vielen Dank!

    – Rapido

    1. Juni 2020 um 16:05 Uhr


  • Das ist die beste Lösung im Internet. Jemand gibt diesem Typen einen Preis

    – Gaurav Chavan

    19. Juni 2020 um 9:19 Uhr


Füge hinzu ein z-index:-1; Dadurch können die Links angeklickt werden. Da The Div absolut über den Links positioniert ist und daher keine Anklickbarkeit zulässt.

 #left_border {
    background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 1094px;
    background-size: 100% auto;
    position: absolute;
    height: 850px;
    left: -51px;
   top: 0px;
    z-index:-1;
}  

Hier ist der Arbeitslösung für das Selbe.

Hoffe das hilft.

  • Während dies vor Jahren funktioniert haben könnte, ist diese Lösung nicht mehr anwendbar. z-index: -1 ist ein Hack und seine Verwendung wird im Laufe der Zeit niemals funktionieren. Wie Sie heute sehen können, Elemente mit z-index: -1 nicht mehr in Chrome angezeigt. Die bevorzugte Lösung ist pointer-events: none.

    – Kevin Ghadyani

    12. Juni 2019 um 23:02 Uhr


  • Ich kann @Kevin Ghadyani unterstützen. Mein Problem wurde tatsächlich VERURSACHT durch z-index: -1. Bitte nicht negativ verwenden z-index. Es wird mehr Kopfschmerzen als Vorsätze verursachen.

    – GR

    25. Juni um 2:01 Uhr

Benutzer-Avatar
Aditya Parmar

Setzen Sie z-index:1 auf die Komponente, die eine absolute Eigenschaft hat.

zum Beispiel:

function myFunction() {
  document.getElementById("print").innerHTML = "Hello World";
}
.custcontainer {
    position: relative;
    
}
.custcontainer .like {
    position: absolute;
    top: 18%;
    left: 10%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    cursor: pointer;
    font-size:30px;
    text-align: center;
    z-index: 1;
}
<div class="custcontainer">
  <P id="print"></p>
  <button onclick="myFunction()" class="like">like</button>
  <img src="https://www.crownplumbing.co/wp-content/uploads/2015/07/placeholder.gif"/>
</div>

Hinzufügen position:relative zu #menu

#menu
{
    position:relative;
}

JS Fiddle-Demo

Sie haben ein Problem mit dem Z-Index.

Es umfasst die Menüelemente:

 #left_border {
    background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 1094px;
    background-size: 100% auto;
    position: absolute;
    height: 850px;
    left: -51px;
    top: 0px;
    z-index:-111;
}

http://jsfiddle.net/Dq6F4/2/

Benutzer-Avatar
Yotam Omer

Ihr Problem besteht eigentlich darin, dass #left_border die Links als Overlay abdeckt. begrenzen Sie seine Breite .. zB

#left_border{
  width:50px;
}

Benutzer-Avatar
Borniet

Verwenden Sie die Entwicklertools von Google Chrome oder Mozilla Firefox, um mit der Maus über Ihre Links und Divs zu fahren (oder sie auszuwählen). Auf diese Weise können Sie sehen, was los ist, und höchstwahrscheinlich gibt es ein anderes div oder ein anderes Objekt, das über Ihren Links gestapelt ist, was Sie daran hindert, darauf zu klicken. Firefox hat auch eine 3D-Option, die das alles noch besser visualisiert:

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/3D_view

1226300cookie-checkwenn div mit absoluter Position hinzugefügt wird, kann nicht auf Links geklickt werden

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

Privacy policy