Question

我正在构建一个页面顶部有absolutely positioned横幅的网站。此div有一个标识为showcase的容器。覆盖此横幅的是导航栏和徽标，这两个横幅都位于名为navLogoContainer的容器div中，位于relatively。这两个容器div都不是任何其他元素的子元素（除了body和html），它们是独立的。

这是奇怪的部分，如果我将navLogoContainer代码放在showcase的代码之后，navLogoContainer的内容未显示，但其中一个链接仍然可以点击（徽标），但不可见，其他一切（导航栏）既不可点击也不可见。

如果我将navBarContainer代码BELLOW showcase代码，那么一切都很完美。

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

我真的很困惑，我一直在尝试不透明，显示属性，z索引，我能想到的一切，对此的任何帮助都将非常感激。

提前致谢。

相关的HTML和CSS（对于整个CSS的邋and和评论道歉，它还没有发布质量:)：

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;
}

Answer 1

从这里可以看出，展示正在完成你要告诉它的事情。

你输入了没有位置的navLogoContainer，所以它将被锚定到顶部。然后你放入展示。它有一个绝对位置，顶部为：0，所以它绝对位于页面或容器元素的顶部，这两个都在。所以它覆盖徽标是有道理的。如果您想要徽标下方的展示，您需要将它放在navLogoContainer下面。

因此，如果navLogoContainer为50px高，则展示的顶级属性应为50px。如果您希望将navLogoContainer放在展示区之上，那么您需要给它一个位置：relative + some z-index love以便知道它在做什么。

将相对div的代码放在绝对div的代码之上会导致相对div不显示

1 个答案: