0

質問があります。現在、ヘッダーとして Nivo Slider を実装しようとしています。このヘッダーには、ロゴ付きのボックス (左)、ナビゲーション付きのボックス (左下)、およびサブナビゲーション付きのボックス (右上) があります。

このチュートリアルで実装してみました。スライダーは機能しますが、それを「ヘッダーの背景」として使用する方法を知る必要があります。つまり、スライダーをつぶしてオブジェクトを所定の位置から移動することなく、オブジェクトの背後に移動する方法を知る必要があります。

これは私のコードです:

<div id="header">
<?php include("header_insert.php"); ?>
<div id="logo">
    <a href="<?php echo home_url( '/' ); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="Website Title"/></a>
</div>
<div id="sub_nav">
    <ul>
        <?php wp_list_pages('title_li=&exclude=56,54'); ?>  
    </ul>
</div>
<?php wp_nav_menu( array(‘menu’ => ‘Navigation’ )); ?>

これを除いて、私は多くのCSSを変更しませんでした:

    #logo, #sub_nav, .menu-navigation-container {
z-index: 9999;
}

#wrapper, #slider {
height: 504px;
width: 960px;
margin: 0 auto;
}

.nivoSlider {
border: 0;
}

スライダーからいくつかの CSS ファイルがありますが、私の主な問題は、ロゴとサブナビゲーションがヘッダー領域の外側にあり、ナビゲーションが正常に機能していることです (スライダーの前と正しい位置にあります)。

4

1 に答える 1

1

css: レスキューへの z-index :)

スライダーには低い z-index を使用し、「上」に配置したい要素には高い値を使用します。うまくいかない場合は、z-index を持つ要素に position: relative または position:absolute を追加してみてください。

于 2013-01-10T14:58:48.803 に答える