我正在构建一个在页面顶部具有absolutely positioned横幅的网站。该div有一个ID为showcase的容器。导航条和徽标覆盖在此横幅上，它们都位于名为navLogoContainer的容器div中，并位于relatively位置。
这两个容器div都不是任何其他元素（body和html除外）的子元素，它们是独立的。
这是很奇怪的部分，如果我将navLogoContainer代码放在showcase的代码上方，则不会显示navLogoContainer的内容，但是其中一个链接仍可单击（徽标），但不可见，其他所有内容（导航栏）都不可单击或可见。
如果将navBarContainer代码置于showcase代码的下面，则一切正常。
当然，我可以将navBarContainer代码放在showcase代码之后，然后一切都会好起来的，但这会导致我的代码不那么可读，并且不遵循逻辑顺序，这是我想避免的。另外，我真的很想知道这是什么时候！
我真的对此感到困惑，我一直在尝试不透明度，显示属性，z索引，我能想到的一切，对此的任何帮助将不胜感激。
提前致谢。
相关的HTML和CSS（对于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;
}
最佳答案
从这句话可以看出，展示柜正在完全按照您的要求进行。
您放入没有位置的navLogoContainer，因此它将固定在顶部。然后放入展示柜。它的绝对位置带有顶部：0，因此它绝对位于这两个页面所在的页面或容器元素的顶部。因此，它覆盖了徽标是有意义的。如果要将展示柜放在徽标内容下方，则需要将其放在navLogoContainer下方。
因此，如果navLogoContainer高50像素，则展示柜的顶部属性应为50像素。如果您希望把navLogoContainer放在展示柜的上方，那么您需要给它一个位置：相对+一些z-index的爱，以便它知道它在做什么。
关于css - 将相对div的代码置于绝对div的代码之上，导致相对div不显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13312380/