当我尝试链接到横幅顶部时,它不起作用。我认为 Div z-index 有问题。但我无法得到它。谁能帮我解决这个问题。我附上了与此相关的内容。请使用以下链接查看该站点。
http://10.8.12.41/srilanka/
#header{
color: #CFCFCF;
font-weight: 600;
/*border-bottom: 4px solid #84AE03;*/
background:#fff;
width: 100%;
z-index: 10;
}
#banner{
height: 100%;
margin: 0px auto 0;
position: relative;
width: 1000px;
z-index: 1;}
#topnavbar{
height: 26px;
/* margin:-5px 102px 0 0;*/
position: relative;
background:url(../images/top_lin.png) repeat-x;
float:left;
width:100%;
float:right;
}
#topnavmenu{
float:right;
width:300px;
padding:3px;
}
#topnavmenu a{
color: #FFFFFF;
display: inline-block;
font-family: 'Open Sans Condensed',sans-serif;
font-size: 11px;
font-weight: 600;
/*line-height: 35px;*/
padding: 0;
text-align: center;
text-decoration: none;
width: auto;
z-index:10px;
}
#apDiv2 {
height: 100%;
margin:0px auto;
position: relative;
width: 1000px;
z-index: 1;
background:url(../images/menubg.png) repeat;
background-color:#00247d;
}
Html
------------------------------------------------
<div id="topnavbar">
<div id="topnavmenu">
<a href="#">CheckmyTrip</a> |<a href="#">Baggage</a> | <a href="#">Travel Tips</a>
</div>
</div>
<div id="banner">
<img src="images/Banner.png" />
</div>
<div id="apDiv2">
<!-- Start css3menu.com BODY section id=2 -->
<ul id="css3menu2" class="topmenu">
<li class="toplast"><a href="contactus.php" style="height:32px;line-height:32px;"><img src="index_files/css3menu2/contact.png" alt=""/>Contact Us</a></li>
</ul>
<p style="display:none"><a href="http://css3menu.com/">Pure CSS Dropdown Menus Css3Menu.com</a></p>
<!-- End css3menu.com BODY section -->
<p style="display:none"><a href="http://css3menu.com/">Pure CSS Dropdown Menus Css3Menu.com</a></p>
<!-- End css3menu.com BODY section -->
</div>
最佳答案
#banner
上的
z-index
是您的大部分问题。
#header {
color: #CFCFCF;
font-weight: 600;
/*border-bottom: 4px solid #84AE03;*/
background:#fff;
width: 100%;
}
#banner {
height: 100%;
margin: 0px auto 0;
position: relative;
width: 1000px;
z-index: -1;
}
#topnavbar {
height: 26px;
/* margin:-5px 102px 0 0;*/
position: relative;
background:url(http://placehold.it/26x26) repeat-x;
width:100%;
float:right;
}
#topnavmenu {
float:right;
width:300px;
padding:3px;
}
#topnavmenu a {
color: #FFFFFF;
display: inline-block;
font-family:'Open Sans Condensed', sans-serif;
font-size: 11px;
font-weight: 600;
/*line-height: 35px;*/
padding: 0;
text-align: center;
text-decoration: none;
width: auto;
z-index:10px;
}
#apDiv2 {
height: 100%;
margin:0px auto;
position: relative;
width: 1000px;
z-index: 1;
background:url(http://placehold.it/300x300) repeat;
background-color:#00247d;
}
另一方面,我看到您正在学习,因为这段代码有很多问题。你做得很好,但这里有几点建议。首先,float:left
和float:right
在同一个类中是没有意义的。然后你也在一些地方不需要它的 float 元素。 position
是一个影响 z-index
的高级属性,因为 z-index
在没有 position
的情况下将无法工作,并且它可以而且通常应该至少与以下之一一起使用:top
left
right
bottom
。我只会在您认为需要时使用它。我认为您的布局可以在没有 position
的情况下完成。
这里网站上的很多人不喜欢W3Schools但它们非常适合像您这样的初学者。
继续努力,你会变得更好。
关于html - 标题中的链接不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14995875/