0
Я новичок в HTML и CSS и испытываю проблемы с новичком.Fixed Topbar и Content Div
Я хочу иметь фиксированную навигационную панель сверху (которая фиксирована), поэтому она будет придерживаться сверху, даже если пользователь прокручивает страницу. и ниже - страница содержания.
Как я хочу, чтобы страница срабатывала, когда пользователь прокручивает страницу, страница содержимого должна попасть под панель навигации.
В моем случае панель навигации исправлена, но при прокрутке содержимого div охватывает панель навигации.
мои коды являются
<div id="Container"> <!--Container Start-->
<div id="TopBar"><!--TopBar Start-->
<div class="fixedwidth"> <!-- Fixedwidth Start-->
<div id="logodiv"> <!-- Logodiv Start-->
<img src="images/mascot.jpg"/>
</div><!-- Logodiv End-->
<div id="signInDiv">
<p><img src="images/orb.png"/>Sign In/Up</p>
</div>
</div> <!-- Fixedwidth End-->
</div><!--TopBar End-->
<div class="break"></div>
<div id="mainContentDiv"> <!--Main Content Start-->
<div class="fixedwidth">
<div id="Content">
</div>
</div>
</div> <!--Main Content End-->
</div><!--Container End-->
и код CSS выглядит следующим образом:
body{
margin:0;
}
#TopBar{
background-color:#FFFFFF;
width:100%;
height:100px;
color:#174269;
position:fixed;
font-weight:bold;
font-size:1.2em;
border-bottom:1px ridge black;
}
.fixedwidth{
width:1050px;
margin:0 auto;
}
#logodiv {
float:left;
padding-bottom:5px;
}
#logodiv img{
width:188px;
height:100px;
}
#signInDiv{
float:right
}
#signInDiv img{
position:relative;
top:6px;
}
#signInDiv p{
position:relative;
top:20px;
}
.break{
clear:both;
}
#mainContentDiv{
position:relative;
top:100px;
width:100%;
height:1000px;
background-color: #0C7ECC;
}
Я знаю, что есть простое решение, но просто не могу понять это.
Исследуйте свойство 'z-index'. – CBroe
Спасибо! =)), который решил мою проблему ^^ – Licentia