1

バナーの上にリンクしようとするとうまくいきません。Divz-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>
4

1 に答える 1

1

z-index#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: left同じfloat:rightクラスでは意味がありません。次に、いくつかの場所でそれを必要としないフローティング要素でもあります。に影響をposition与える高度なプロパティであり、これがないと機能せず、通常、次の少なくとも1つで使用できます。私はあなたがそれを必要と思う場合にのみそれを使用します。レイアウトはそのままでもできると思います。z-indexz-indexpositiontop left right bottomposition

ここのサイトの多くの人々はW3Schoolsが好きではありませんが、彼らはあなたのような初心者には最適です。

良い仕事を続けてください、そうすればあなたは良くなるでしょう。

于 2013-02-21T08:59:36.463 に答える