我正在构建一个absolutely positioned在页面顶部有横幅的网站。这个 div 有一个 id 的容器showcase。覆盖此横幅的是导航栏和徽标，它们都位于名为 的容器 divnavLogoContainer中，它被relatively定位。这两个容器 div 都不是任何其他元素（除了 body 和 html）的子元素，它们是独立的。
这是奇怪的部分，如果我将navLogoContainer代码放在代码showcase之上，则内容navLogoContainer不会显示，但是其中一个链接仍然是可点击的（徽标），但不可见，其他所有内容（导航栏）都不可点击或可见。
如果我把navBarContainer代码放在showcase代码下面，一切都会完美运行。
当然，我可以将代码放在navBarContainer代码下面showcase，一切都会好起来的，但这会导致我的代码不那么可读，并且不遵循逻辑顺序，这是我想避免的。另外，我真的很想知道它什么时候会这样做！
我对此感到非常困惑，我一直在尝试不透明度，显示属性，z-indexes，我能想到的一切，非常感谢任何帮助。
提前致谢。
相关的 HTML 和 CSS（对于 CSS 的邋遢和评论表示歉意，它还没有达到发布质量:)：
HTML：
<div id="navLogoContainer">
<div id="logo">
<a href="/beta/"></a>
<p class="big">Name</p>
<p class="small">Description</p>
</div>
<nav>
<a href="/">Home</a>
<a href="/linkOne">Link One</a>
<a href="/linkTwo">Link Two</a>
</nav>
</div>
<div id="showcase">
<!First showcase>
<div id="firstShowcase">
<div id="firstCaseStudyContainer">
<div id="firstCaseStudy3DContainer">
<div id="firstCaseStudy">
<p class="caseStudyTitle">Case Study Title</p>
<p class="caseStudyDescription">A brief description of relevant stuff<a href="http://google.com">View the site</a> or <a href="/anotherPage/">view a second page</a>.</p>
</div>
</div>
</div>
</div>
</div>
CSS：
/*The code for the navbar*/
#navLogoContainer {
margin: 0px auto;
width: 1050px;
padding-top: 23px;
height: 62px;
z-index: 5;
min-width: 1050px;
}
#logo {
position: absolute;
float: left;
background-color: #00224d;
height: 62px;
width: 273px;
}
#logo a {
position: absolute;
display: block;
width: 100%;
height: 100%;
z-index: 3;
}
/*The showcase container*/
#showcase {
position: absolute;
width: 100% !important;
height: 399px;
top: 0px;
min-width: 1050px;
z-index: 0;
}
/*The backgrounds for the showcases*/
#firstShowcase {
background-image: url("first.png");
margin: 0;
width: 100% !important;
height: 100%;
z-index: 0;
}
/*The CONTAINERS for the case studies*/
#firstCaseStudyContainer {
width: 930px;
height: 399px;
margin: 0px auto;
z-index: 0;
}
/*The 3D containers*/
#firstCaseStudy3DContainer {
position: absolute;
height: 177px; /*Case study box height related. DO NOT SET TO AUTO. This value must be done by hand.*/
width: 410px;
margin-left: 530px;
margin-top: 247px;
background-image: url("3dtriangle.png");
background-position-y: 100%;
background-repeat: no-repeat;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
}
/*The actual text boxes for the case studies. They default to auto*/
#firstCaseStudy {
position: absolute;
height: auto;
width: 392px;
bottom: 0;
margin-left: 9px;
overflow-y: hidden;
-webkit-transition: all 1.0s;
-moz-transition: all 1.0s;
background-color: black;
overflow-y: hidden;
}