我现在在网站上有一个导航栏和一个 div。 div 稍微覆盖了导航栏，但是当我调整窗口大小时，它完全覆盖了导航栏。我希望它总是能稍微覆盖导航栏，但不能完全覆盖。
HTML
<body>
<div id="wrapper">
<ul>
<li class="nav"><a href="#">Home</a></li>
<li class="nav"><a href="#">About Me</a></li>
<li class="nav"><a href="#">Projects</a></li>
<li class="nav"><a href="#">Resume</a></li>
<li class="nav"><a href="#">Contact</a></li>
</ul>
<div id="bod">
<h1 class="title">Home</h1>
</div>
</div>
</body>
CSS
#bod {
height: 100%;
width: 86%;
background-color: #F4F3EE;
position: absolute;
top: 0px;
right: 0px;
box-shadow: -1px 0px 10px 1px #999;
-moz-box-shadow: -1px 0px 10px 1px #999;
-webkit-box-shadow: -1px 0px 10px 1px #999;}
.nav {
border: 1px solid #F4F3EE;
width:20%;
height:100px;
color: #F4F3EE;
margin: 2px 0px 0px 10px;
text-align: left;
font-family: Tahoma, Geneva, sans-serif;
font-size: 30px;
padding: 0px 0px 5px 0px;
list-style-type: none;
border-radius: 5px;
box-shadow: -1px 0px 10px 1px #999;
-moz-box-shadow: -1px 0px 10px 1px #999;
-webkit-box-shadow: -1px 0px 10px 1px #999;
box-shadow: inset 1px 2px 4px #F4F3EE;
-moz-box-shadow: inset 1px 2px 4px #F4F3EE;
-webkit-box-shadow: inset 1px 2px 4px #F4F3EE;
background: #b58aa5;
background: -moz-linear-gradient(top, #ad8599 1%, #b58aa5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ad8599), color-stop(100%,#b58aa5));
background: -webkit-linear-gradient(top, #ad8599 1%,#b58aa5 100%);
background: -o-linear-gradient(top, #ad8599 1%,#b58aa5 100%);
background: -ms-linear-gradient(top, #ad8599 1%,#b58aa5 100%);
background: linear-gradient(to bottom, #ad8599 1%,#b58aa5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad8599', endColorstr='#b58aa5',GradientType=0 );
JavaScript
$(document).ready(function() {
$('.nav').mouseenter(function() {
$(this).animate({marginLeft: '-=20px'}, 100);
$(this).addClass('.nav1');
});
$('.nav').mouseleave(function() {
$(this).animate({marginLeft: '+=20px'}, 100);
});
});
我这辈子都想不出如何确保用户在调整窗口大小时仍然可以看到导航。
最佳答案
在#bod 上设置left: 200px;，这将修复它。然后你也可以摆脱在 #bod 上设置的 width: 86%; 。你绝对定位#bod，这意味着#bod被从常规流程中取出来，变成了它自己的东西。现在您可以设置top、left、bottom 和right 来指定网页两侧之间的空间和#bod。如果你在 #bod 上设置了 bottom: 0px; 你就不需要在 #bod 上设置 height: 100%; > 要么。
关于javascript - 调整窗口大小时如何阻止 HTML 元素被覆盖？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16328886/