我的导航固定在页面顶部。当我向下滚动并且不将鼠标悬停在 div 元素上时，一切看起来都很好。但是，当尝试从我的导航中选择一些链接时，我只从我导航下的内容中选择一个 div 元素。问题出在它下面的 div 元素中，因为每次我选择 div 元素时，它都会破坏我的固定导航。如果您了解问题，请帮助我。
我的html代码是
<html !DOCTYPE>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<head>
</head>
<body>
<div id="navbg">
<nav>
<ul>
<li><a href="#"><center><img src="uploads/nav/pocetna.png"><p>Početna</p></center></a></li>
<li><a class="select" href="#"><center><img src="uploads/nav/trgovina.png"><p>Trgovina</p></center></a></li>
<li><a href="#"><center><img src="uploads/nav/info.png"><p>O nama</p></center></a></li>
<li><a href="#"><center><img src="uploads/nav/mail.png"><p>Kontakt</p></center></a></li>
</ul>
</nav>
</div>
<header>
<img id="logo" src="images/logo4.png">
</header>
<div id="clear"></div>
<section>
<h1>Trgovina</h1>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/4.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<div class="tekst"><a href="#">Arc de Triomphe</a></div>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/2.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/3.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/4.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<a href="#"><div class="tekst">Arc de Triomphe</div></a>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<a href="#"><div class="tekst">Arc de Triomphe</div></a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/2.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/3.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/4.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<a href="#"><div class="tekst">Arc de Triomphe</div></a>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<a href="#"><div class="tekst">Arc de Triomphe</div></a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/2.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/3.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<a href="#">
<img class="slika"src="uploads/4.jpg">
<div class="tekst">Arc de Triomphe</div>
</a>
</div>
<div class="okvir">
<img class="slika"src="uploads/1.jpg">
<a href="#"><div class="tekst">Arc de Triomphe</div></a>
</div>
<div id="clear"></div>
</section>
</body>
</html>
这是我的CSS:
@font-face {font-family: 'Roboto';font-style: normal;font-weight: normal;src: local('Roboto Regular'), local('Roboto-Regular'), url(../fonts/roboto-normal.woff) format('woff');}
@font-face {font-family: 'Roboto';font-style: normal;font-weight: bold;src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/roboto-bold.woff) format('woff');}
@font-face {font-family: 'Roboto';font-style: italic;font-weight: normal;src: local('Roboto Italic'), local('Roboto-Italic'), url(../fonts/roboto-italic.woff) format('woff');}
@font-face {font-family: 'Roboto';font-style: italic;font-weight: bold;src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(../fonts/roboto-bold-italic.woff) format('woff');}
body{margin:0;padding:0;background:#eee url(../images/bg.png);font-family:Roboto;font-size:14px;font-style:normal;font-weight:normal;color:#777;}
#navbg{width:100%;height:20px;position:fixed;background:#333;}
nav{height:50px;float:right;margin:20px 40px 0px 0px;padding:0px 12px;background:#333;border-radius:0px 0px 10px 10px;}
nav ul, nav li{margin:-10px 0px 0px;padding:0;list-style:none;}
nav ul li{float:left;}
nav ul a{display:block;padding:8px 18px;text-decoration:none;color:#ddd;transition:all 0.3s;}
nav ul a:hover{color:#fff;background:rgba(255,255,255,0.1);}
nav ul a p{margin:4px 0px 0px;text-align:center;}
nav ul a img {width:30px;height:30px;}
.select{color:#a3d45b;background:rgba(0,0,0,0.1);}
header{padding:30px 40px 10px;background:url(../images/headBg.png);border-bottom:4px solid #669b3c;}
#logo{display:block;margin-right:40px;width:230px;}
section{margin:40px;}
h1{font-size:24px;font-weight:100;text-shadow:0px 1px #FFF;}
/* HERE IS PROBLEM */
.okvir{float:left;width:20%;height:19vw;overflow:hidden;}
.okvir a{display:block;margin:0;padding:0;font-size:20px;text-align:center;text-decoration:none;color:#fff;}
.slika {position:static;width:100%;height:19vw;}
.tekst {position:relative;width:80%;height:17vw;margin:-19vw 0 0;padding:8vw 10% 1vw;background:rgba(0,0,0,0.9);transition:all 1s;opacity:0;}
.okvir:hover .tekst {opacity:1;}
#clear{clear:both;}
最佳答案
关于html - CSS 修复了 div 元素下的导航崩溃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26017785/