Css 将相对div的代码置于绝对div的代码之上，会导致相对div不显示

我正在建立一个网站，在页面顶部有一个绝对定位的横幅。此div有一个id为showcase的容器。覆盖此横幅的是导航栏和徽标，它们都位于名为

navLogoContainer

的容器div中，相对定位为

。
这两个容器div都不是任何其他元素（body和html除外）的子元素，它们是独立的

这是一个奇怪的部分，如果我将
navLogoContainer
代码放在
showcase
的代码之上，则不会显示
navLogoContainer
的内容，但是其中一个链接仍然可以单击（徽标），但不可见，其他所有链接（导航栏）都不可单击或可见

如果我把
navBarContainer
代码放在
showcase
代码下面，那么一切都会正常工作

当然，我可以将
navBarContainer
代码放在
showcase
代码下面，一切都会很好，但这会导致我的代码不可读，并且不遵循逻辑顺序，这是我希望避免的。另外，我真的很想知道它什么时候会这样做

我真的很困惑，我一直在尝试不透明度，显示属性，z-索引，所有我能想到的，任何与此相关的帮助都将不胜感激

提前谢谢

相关的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>

从上面所说的，showcase正在做你告诉它要做的事情

你把navLogoContainer放进去，它没有位置，所以它会固定在顶部。然后你把它放进陈列柜里。它的绝对位置为top:0，因此它绝对位于页面或容器元素的顶部，这两个元素都位于其中。所以它覆盖了商标是有道理的。如果你想让展示在logo的下面，你需要把它放在navLogoContainer的下面

因此，如果navLogoContainer是50px高，showcase的top属性应该是50px。如果您希望navLogoContainer正好位于showcase上方，那么您需要给它一个位置：相对+一些z索引love，以便它知道它在做什么。
这看起来像是无效的HTML。尝试修复它，直到它通过，然后查看是否仍然存在问题。z-index对静态定位的元素没有影响（默认设置）。您的
navLogoContainer
将被绝对定位的
showcase
shmiddy覆盖，非常感谢！我不敢相信我错过了。我将
navLogoContainer
更改为position:relative。再次感谢你！
/*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;
}