absolutely positionedページの上部にバナーがあるサイトを構築しています。この div には id のコンテナがありshowcaseます。このバナーの上にナビゲーション バーとロゴが重なっています。これらはどちらも というコンテナ div 内にあり、navLogoContainer配置されていrelativelyます。これらのコンテナー div はどちらも、他の要素 (body と html 以外) の子ではなく、独立しています。
これは奇妙な部分です。 のnavLogoContainerコードの上にコードを配置するshowcaseと、 の内容はnavLogoContainer表示されませんが、リンクの 1 つ (ロゴ) はまだクリック可能ですが、表示されず、他のすべて (ナビゲーションバー) もクリック可能ではありません。または見える。
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>
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;
}