2013-02-21 167 views
1

当我尝试链接到标题顶部时无法正常工作。我的事情这是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> 
+0

'z-index:10px'无论如何 – 2013-02-21 06:27:36

+0

你能分享你的html代码吗???? – 2013-02-21 06:28:28

+0

什么链接?你可以在html中显示相关的标签 – lukeocom 2013-02-21 06:28:32

回答

1

z-index on #banner是你的大部分问题。

http://jsfiddle.net/JwPjA/3/

#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: leftfloat:right在同一类没有任何意义。那么你也是浮动的元素,在一些地方不需要它。 position是一个先进的属性,影响z-indexz-index不会工作,没有position它可以并且通常应该至少与其中一个使用:topleftrightbottom。我只会在你认为你需要的时候使用它。我认为你的布局是可以完成的,没有position

很多网站上的人都不喜欢W3Schools,但他们对于像你这样的初学者来说非常棒。

保持良好的工作,你会变得更好。