我在网站上实现了两个独立的可折叠菜单脚本,第二个菜单是一个可折叠的信息显示,当信息菜单打开时,它有一个旋转的箭头,箭头本身会浮在其他所有内容之上,即使主下拉菜单覆盖了它。我已经搞砸了这两个项目的z索引,但不知道如何修复它。我已经附上了相关代码以及问题区域的照片。
这是我的汉堡主菜单的CSS和左上角的按钮
/* [ON BIG SCREENS] */
/* (A) WRAPPER */
#hamnav {
width: 100%;
background: #333333;
/* Optional */
top: 0;
position: fixed;
border-bottom: 1px solid #999999;
}
/* (B) HORIZONTAL MENU ITEMS */
#hamitems { display: flex;
z-index:100;
}
#hamitems a {
flex-grow: 1;
flex-basis: 0;
padding: 5px;
color: #D5DBDB;
text-decoration: none;
text-align: center;
font-size: 12px;
line-height: 20px;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #666666;
font-family; Verdana;
z-index:100;
}
#hamitems a:hover {
background: #999999;
color: #D5DBDB;
}
/* (C) HIDE HAMBURGER */
#hamnav label, #hamburger { display: none; }
/* [ON SMALL SCREENS] */
@media screen and (max-width: 768px){
/* (A) BREAK INTO VERTICAL MENU */
#hamitems a {
box-sizing: border-box;
display: block;
width: 100%;
border-top: 1px solid #999999;
font-family: Verdana;
z-index:100;
}
/* (B) SHOW HAMBURGER ICON */
#hamnav label {
display: inline-block;
color: #FFFFFF;
background: #333333;
font-style: normal;
font-size: 2.0em;
padding: 5px;
padding-left: 12px;
}
/* (C) TOGGLE SHOW/HIDE MENU */
#hamitems { display: none; }
#hamnav input:checked ~ #hamitems { display: block; }
}
/* [DOES NOT MATTER] */
html, body {
padding: 0;
margin: 0;
color: #FFFFFF;
background-color: #000000;
bgcolor: #000000;
}
这是我的CSS为可折叠的信息菜单,它显示子弹上方浮动的主菜单时,我下降。没有其他浮动以上的主菜单。
input[type='checkbox'] {
display: none;
}
.wrap-collabsible {
margin: 10px 5px 20px 5px; }
.lbl-toggle {
display: block;
font-weight: bold;
font-family: monospace;
font-size: 1.2rem;
text-transform: uppercase;
text-align: center;
padding: 1rem;
color: #DDD;
background: #000000;
cursor: pointer;
border-radius: 7px;
transition:
all 0.25s ease-out;
}
.lbl-toggle:hover {
color: #FFF;
}
.lbl-toggle::before {
content: ' ';
display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: .7rem;
transform: translateY(-2px);
transition: transform .2s ease-out;
}
.toggle:checked+.lbl-toggle::before {
transform: rotate(90deg) translateX(-3px);
}
.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height .25s ease-in-out;
}
.toggle:checked + .lbl-toggle + .collapsible-content {
max-height: 5000px;
}
.toggle:checked+.lbl-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.collapsible-content .content-inner {
background: #000000;
border-bottom: 1px solid #FFFFFF;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: .5rem 1rem;
}
.collapsible-content p {
margin-bottom: 0;
font-size: 15px;
font-family: Verdana;
margin-left: auto;
margin-right: auto;
text-align: justify;
line-height: 25px;
}
这是所要求的标记,这将打印可折叠信息菜单,带有麻烦的圆点(复选框)
if (isset($v) && $v==1){
echo "<div class='wrap-collabsible'>";
echo "<input id='collapsible' class='toggle' type='checkbox'>";
echo "<label for='collapsible' class='lbl-toggle'>Alphabetical name jump</label>";
echo "<div class='collapsible-content'>";
echo "<div class='content-inner'>";
echo "<p>";
$sql = "SELECT user_id, username FROM user_reg ORDER BY username";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_array($result, MYSQLI_NUM))
{
$id=$row[0];
$username=$row[1];
echo "<a href='#$id' class=block>$username</a>";
echo " ";
}
echo "</p>";
echo "</div>";
echo "</div>";
echo "</div>";
} // END IF V1
这是汉堡菜单,上面显示了令人烦恼的子弹头
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body bgcolor="#000000">
<!-- (A) MENU WRAPPER -->
<nav id="hamnav">
<!-- (B) THE HAMBURGER -->
<label for="hamburger">☰</label>
<input type="checkbox" id="hamburger"/>
<!-- (C) MENU ITEMS -->
<div id="hamitems">
<a href=admin_panel.php?v=8>Unoff, Verif & Photo <?php echo "($total8)"; ?></a>
<a href=admin_panel.php>Offic, Verif <?php echo "($total)"; ?></a>
<a href=admin_panel.php?v=7>Unnoff, Verif, No Photo <?php echo "($total7)"; ?></a>
<a href=admin_panel.php?v=2>UnVerif <?php echo "($total2)"; ?></a>
<a href=admin_panel.php?v=1>Active <?php echo "($total1)"; ?></a>
<a href=admin_panel.php?v=3>Blocked <?php echo "($total3)"; ?></a>
<a href=admin_panel.php?v=4>Inactive <?php echo "($total4)"; ?></a>
<a href=admin_panel.php?v=5>Test Account</a>
<a href=admin_panel_orders.php>Orders <?php echo "($total6 new)"; ?></a>
<a href=admin_email_log.php?v=7>Remind Log</a>
<a href=admin_panel_polls.php>Poll #1 Log <?php echo "($total_poll votes)"; ?></a>
<a href=admin_messages.php>Contact Mess <?php echo "($total_mess new)"; ?></a>
<a href=admin_refer_friend_log.php>Refer FRND Log <?php echo "($total_log)"; ?></a>
<a href=admin-edit-store-items.php>Products <?php echo "($total_products out of stock)"; ?></a>
<a href=admin-create-coupon.php>Coupons <?php echo "($total_coup left)"; ?></a>
</div>
</nav>
1条答案
按热度按时间qltillow1#
我使用
style="position: relative; z-index: 0;"
解决了这个问题,对于必须出现在其他元素下面的元素。有关详细信息,请查看this文章中的第3点!