使用z-index時如何在不將所有其他元素z-index設為負的情況下使鏈接可點擊？
[英]How to make link clickable when using z-index without turning all other elements z-index negative?
問題描述
我正在嘗試創建一個帶有按鈕和工具欄的下拉框，以便我的下拉菜單位於工具欄后面但在主元素前面。 問題是要這樣做，我使用帶負值的z-index，因為在工具欄上使用正值會由於位置和層次結構而使其滯后於我的下拉框。
我知道，如果我去改變元素的z-index的在我的DOM以較小的負值（如建議在這里 ），它將使我的鏈接再次點擊，不過這似乎是解決這個問題的一種非常低效的方式。 另外，我寧願不要亂用工具欄，並為每個按鈕將其分解為不同的元素，因為這將來可能會引起很多響應性問題。 請查看下面的JFiddler鏈接。
這是我的代碼：
$('#btn2').on('click', function() { console.log('Click!'); var element = document.getElementById("sub-memu"); element.classList.toggle("show"); })
body { background-color: gray; height: 100vh; padding: 0px; margin: 0px; } .toolbar { height: 40px; background-image: linear-gradient(white, red); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35); position: relative; } .buttons { display: flex; flex-direction: row; } button { margin-right: 5px; } #sub-memu { position: absolute; display: flex; flex-direction: column; background-color: white; padding: 10px; min-width: 100px; z-index: -1; transform: translate(0px, -140%); transition: transform 1s; } main { padding: 10px; margin: 10px; background-color: yellow; height: calc(100% - 40px - 20px - 20px); position: relative; z-index: -2; } .show { transform: translate(0px, 25px) !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class='toolbar'> <div class='buttons'> <button id='btn1'> Button 1 </button> <div class='btn-wrapper'> <button id='btn2'> Button 2 </button> <div id='sub-memu' class='subMenu'> <a href='#'>Can you click me?</a> <a href='#'>Can you click me?</a> <a href='#'>Can you click me?</a> <a href='#'>Can you click me?</a> </div> </div> </div> </div> <main> This is my main element. <a href="#">You should be able to click me</a>. </main> </body>
https://jsfiddle.net/atb8yq6e/1/
我要實現的行為與在JSFiddle鏈接中看到的行為相同（下拉框從導航欄后面但在我的主要內容前面降低），但是具有活動鏈接，而無需瀏覽DOM樹和將每個重疊元素的z-index更改為較小的數字。
提前謝謝大家，Lior。
3 個解決方案
解決方案1
1 已采納 2019-08-12 09:35:53
將z-index添加到body元素以確保您創建了一個堆棧上下文，並避免該元素位於其后：
$('#btn2').on('click', function() { console.log('Click!'); var element = document.getElementById("sub-memu"); element.classList.toggle("show"); })
body { background-color: gray; height: 100vh; padding: 0px; margin: 0px; position:relative; z-index: 0; } .toolbar { height: 40px; background-image: linear-gradient(white, red); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35); position: relative; } .buttons { display: flex; flex-direction: row; } button { margin-right: 5px; } #sub-memu { position: absolute; display: flex; flex-direction: column; background-color: white; padding: 10px; min-width: 100px; z-index: -1; transform: translate(0px, -140%); transition: transform 1s; } main { padding: 10px; margin: 10px; background-color: yellow; height: calc(100% - 40px - 20px - 20px); position: relative; z-index: -2; } .show { transform: translate(0px, 25px) !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class='toolbar'> <div class='buttons'> <button id='btn1'> Button 1 </button> <div class='btn-wrapper'> <button id='btn2'> Button 2 </button> <div id='sub-memu' class='subMenu'> <a href='#'>Can you click me?</a> <a href='#'>Can you click me?</a> <a href='#'>Can you click me?</a> <a href='#'>Can you click me?</a> </div> </div> </div> </div> <main> This is my main element. <a href="#">You should be able to click me</a>. </main> </body>
解決方案2
0 2019-08-12 10:08:16
將此代碼添加到您的CSS：
html{
pointer-events:none;
}
body *{
pointer-events:initial;
}
body {
background-color: gray;
height: 100vh;
padding: 0px;
margin: 0px;
pointer-events:none;
}
解決方案3
-1 2019-08-12 09:24:21
只需在#sub-memu （可能應該是菜單？） #sub-memu z-index設置為1 ，然后刪除main上的z-index值即可。
jQuery重置所有其他子元素的z-index
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.