下拉导航栏子项与数据表重叠，导致它看起来透明
问题描述 投票：0回答：2
我在一个网站上工作，该网站的页面在顶部显示导航栏，在下方显示数据表。但是，当我将鼠标悬停在导致子项下拉的导航栏上时，我注意到与数据表重叠的部分看起来几乎是透明的。
我已经添加了我的网页的简化版本的代码以及一些屏幕截图来可视化我面临的问题。是什么导致了这个问题，我该如何解决？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/fc-4.2.2/fh-3.3.2/r-2.4.1/datatables.min.css"/>
<style>
#container {
margin: 0 auto;
max-width: 1100px;
}
.toggle, [id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #0177bf;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size: 20px;
line-height: 60px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: left;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #0177bf;
}
nav a {
display: block;
padding: 0 10px;
color: #FFF;
font-size: 15px;
line-height: 60px;
text-decoration: none;
}
nav ul li ul li:hover { background: #026dae; color: white; }
nav a:hover { background-color: #026dae; color: white; }
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul { display: inherit; color: white; }
nav ul ul li {
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 170px;
}
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */
@media all and (max-width : 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
.toggle + a,
.menu { display: none; position: absolute; }
.toggle {
display: block;
background-color: #0177bf;
padding: 0 10px;
color: #FFF;
font-size: 22px;
font-weight:bold;
line-height: 60px;
text-decoration: none;
border: none;
}
[id^=drop]:checked + ul { display: block; }
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a { padding: 0 40px; }
nav ul ul ul a { padding: 0 80px; }
nav ul ul {
float: none;
position: static;
color: #ffffff;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; color: white;}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li { position: static; }
@media all and (max-width : 330px) {
nav ul li {
display: block;
width: 94%;
}
}
}
</style>
<!-- JavaScript -->
<script src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/fc-4.2.2/fh-3.3.2/r-2.4.1/datatables.min.js"></script>
<script>
$(document).ready(function() {
$('#membersTable').DataTable({
responsive: true,
pageLength: 25
});
});
</script>
</head>
<body>
<nav>
<label for="drop" class="toggle">≡ Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="/dashboard">Dashboard</a></li>
<li>
<label for="drop-1" class="toggle">Ticket Management</label>
<a href="#">Ticket Management</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="/members">Add New Tickets</a></li>
<li><a href="/member?action=new">Sell Tickets</a></li>
</ul>
</li>
<li>
<label for="drop-2" class="toggle">Event Management</label>
<a href="#">Event Management</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="/events">Event Calendar</a></li>
<li><a href="/event?action=new">Add New Event</a></li>
<li><a href="/my-events">My Events</a></li>
</ul>
</li>
</ul>
</nav>
<div class="container">
<table id="membersTable" class="table table-striped table-bordered" style="width:100%">
<thead id="membersTableHeaders">
<tr>
<th data-priority="2"></th>
<th data-priority="1"></th>
<th data-priority="1"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th data-priority="2"></th>
<th data-priority="2"></th>
<th data-priority="2"></th>
<th data-priority="1"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>2个回答
1
投票
投票
您的导航在 HTML 中首先声明，因此它位于其他所有内容之下。您需要将
z-indexpositionstaticnav{
position: relative;
z-index: 999;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/fc-4.2.2/fh-3.3.2/r-2.4.1/datatables.min.css"/>
<style>
#container {
margin: 0 auto;
max-width: 1100px;
}
.toggle, [id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #0177bf;
position: relative;
z-index: 999;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size: 20px;
line-height: 60px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: left;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #0177bf;
}
nav a {
display: block;
padding: 0 10px;
color: #FFF;
font-size: 15px;
line-height: 60px;
text-decoration: none;
}
nav ul li ul li:hover { background: #026dae; color: white; }
nav a:hover { background-color: #026dae; color: white; }
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul { display: inherit; color: white; }
nav ul ul li {
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 170px;
}
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */
@media all and (max-width : 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
.toggle + a,
.menu { display: none; position: absolute; }
.toggle {
display: block;
background-color: #0177bf;
padding: 0 10px;
color: #FFF;
font-size: 22px;
font-weight:bold;
line-height: 60px;
text-decoration: none;
border: none;
}
[id^=drop]:checked + ul { display: block; }
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a { padding: 0 40px; }
nav ul ul ul a { padding: 0 80px; }
nav ul ul {
float: none;
position: static;
color: #ffffff;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; color: white;}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li { position: static; }
@media all and (max-width : 330px) {
nav ul li {
display: block;
width: 94%;
}
}
}
</style>
<!-- JavaScript -->
<script src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/fc-4.2.2/fh-3.3.2/r-2.4.1/datatables.min.js"></script>
<script>
$(document).ready(function() {
$('#membersTable').DataTable({
responsive: true,
pageLength: 25
});
});
</script>
</head>
<body>
<nav>
<label for="drop" class="toggle">≡ Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="/dashboard">Dashboard</a></li>
<li>
<label for="drop-1" class="toggle">Ticket Management</label>
<a href="#">Ticket Management</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="/members">Add New Tickets</a></li>
<li><a href="/member?action=new">Sell Tickets</a></li>
</ul>
</li>
<li>
<label for="drop-2" class="toggle">Event Management</label>
<a href="#">Event Management</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="/events">Event Calendar</a></li>
<li><a href="/event?action=new">Add New Event</a></li>
<li><a href="/my-events">My Events</a></li>
</ul>
</li>
</ul>
</nav>
<div class="container">
<table id="membersTable" class="table table-striped table-bordered" style="width:100%">
<thead id="membersTableHeaders">
<tr>
<th data-priority="2"></th>
<th data-priority="1"></th>
<th data-priority="1"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th data-priority="2"></th>
<th data-priority="2"></th>
<th data-priority="2"></th>
<th data-priority="1"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>-1
投票
投票
使用
z-indexz-index: 999999999999999999999999999
最新问题
- cppcheck：越界访问，因为“容器为空”但容器不为空
- Arduino OLED 屏幕卡住，显示奇怪的白屏 [已关闭]
- 使用opencv检测类似Omega的额头皱纹
- 如何只下载 Github 中主分支的新部分而不重新下载整个项目？
- 我收到了 Nodejs BAACKEND 的此错误
- 对数据框进行子集化，以便保留包含 R 中某个变量的所有值的组合
- 类型错误：无法使用“in”运算符在未定义中搜索“复数”
- 使用 Ruby 与 FTP 进行对话
- 有没有办法在Godot 4中的按钮上写入文本之前手动给出特定数量的像素空间？
- 将可选语句拉入维基数据查询结果
- sscanf 在 CIL 中运行时返回 0
- raspi 5 上的 Opencv 问题
- 如何使矩阵中的一行仅与第一个数字一样长？
- 在 Azure DevOps 中创建新的 Kubernetes 服务连接时，您似乎没有活动的 Azure 订阅
- Jquery onClick 不适用于 iPhone，但适用于 Android
- url_launcher 不在 wp 中发送消息
- PyQt5“类似代码”语法的代码完成
- 如何获取solana上的交易金额或价值？
- 如何让我的网站可以选择在手机上的 Google 设置中安装该应用程序？
- DDEV：Laravel + Vite + Websockets 与 Soketi - 端口配置问题
© www.soinside.com 2019 - 2024. All rights reserved.