Мне очень тяжело с некоторыми ссылками, которые я пытаюсь щелкнуть в пунктах выпадающего меню, которые я сделал с помощью Bootstrap. Я подозреваю, что проблема с z-индексом, но я попытался установить свою позицию на relative и установить более высокий z-index для всего моего меню и отдельных пунктов меню. Я также попытался установить более низкий z-индекс для элементов, которые, как мне казалось, «покрывают» мое меню, но безуспешно.
После просмотра Stackoverflow и Google в течение часа все указывает на проблему z-index. Я видел различные решения, которые предлагали использовать pointer-events, который я установил равным none для различных предметов; тоже не повезло,
Мой код выглядит следующим образом ( Вы можете щелкнуть ссылку на разорванное изображение, чтобы открыть меню, изображение аватара извлекается из PHP / базы данных и затем нажать «Изменить фотографию аватара» или «Выйти» ):
body {
position: relative;
z-index: 0;
}
.av_photo {
border-radius: 100px;
border: 3px solid lightgrey;
padding: 5px;
}
.dropleft {
margin-left: 93%;
margin-top: -3.8%;
position: relative;
}
.dropdown-menu {}
.dropdown-menu::before {
position: absolute;
display: inline-block;
border-bottom: 7px solid transparent;
border-top: 7px solid transparent;
border-left: 7px solid #CCC;
display: inline-block;
right: -7px;
top: 42px;
content: '';
}
.dropdown-menu::after {
position: absolute;
display: inline-block;
border-bottom: 6px solid white;
border-top: 6px solid transparent;
border-left: 6px solid transparent;
display: inline-block;
right: -7px;
top: 42px;
content: '';
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
/* Height of the footer */
font-size: 14px;
color: gray;
padding: 5px;
}
.avatardisplay {
display: inline-block;
}
.avatardisplay img {
margin: 25px;
cursor: pointer;
}
.avatardisplay:hover>a {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.avatardisplay:hover>a:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.avatardisplay a {
text-decoration: none;
}
.av {
border-radius: 100px;
border: 3px solid lightgrey;
padding: 5px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script type="text/JavaScript" src="js/chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<link rel="stylesheet" type="text/css" href="css/home.css">
<?php
// get the current URL
$link = $_SERVER['REQUEST_URI'];
?>
</head>
<body>
<ul style="margin-top: 2%; margin-left: 2%" class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="dashboard.php">Reports</a></li>
<div class="navbar dropleft">
<li data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-item">
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="logout.php">Change Avatar Photo</a> <a class="dropdown-item" href="#">Settings</a> <a class="dropdown-item" href="logout.php">Logout</a> </div>
<a href=""><img class="av_photo" src=<?php echo $av ?>></a>
</li>
</div>
</ul>
<div class="container">
<br>
<h3>Quick Overview:</h3>
<hr>
<div class="card-deck">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Sucessful Reports</h5>
<p class="card-text">Reports that were ran where data matches from sent / recieved data.</p>
<button id="successtoggle" class="btn btn-success">
<?php echo $success ?>
</button>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Failed Reports</h5>
<p class="card-text">Reports that were ran where data does not match from sent / recieved data.</p>
<a href="#" id="failtoggle" class="btn btn-danger">
<?php echo $failed ?>
</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Total Reports</h5>
<p class="card-text">Total number of reports ran between success and fail.</p>
<a href="#" id="totaltoggle" class="btn btn-primary">
<?php echo $total ?>
</a>
</div>
</div>
</div>