0

回転するバナーの上にあるナビゲーションとロゴの div を作成しようとしています。CSSで困っています。

例えば：

<div class="logo-div">

<div class="logo">
<img src="image/logo.jpg">
</div>

<div class="nav">
<ul><li>nav-button</li></ul>
</div>

</div><!--logo div -->

<div class="rotator">
</div>

ローテーターをnav-logo divに引き上げるために負のトップマージンを試しましたが、ロゴではなくnavのみが表示されました。nav-logo と rotator の順序を入れ替えてみましたが、それもうまくいきませんでした。

z-index と相対位置と絶対位置で遊ぶ必要があると思いますが、正しく動作させることはできません。

どうもありがとう。

この機能を備えたサイトの例を次に示します。

4

1 に答える 1

0

わかりました。サンプルリンクが必要なものを適切に示している場合...重要な質問は、バナーを回転させるためにどの方法を使用するかということです。もちろんjavascript（ブラウザ間の互換性が必要な場合）が...どのような方法ですか？あなたが提供したリンクの男は、その中に<ul>いくつかの要素が<li>あり、それぞれが異なる背景の1つを持っている要素を使用しています...

transitions（高度なcss3効果）を使用して、absolute positioningそしてleft、彼は基本的にそれらを水平方向にスクロールしての値を変更しますleft

いずれにせよ、次のようなものが必要になります。

.wrapper {display:block; position:relative;}
.logo-div {position:absolute; top:0; left:0; z-index:9999;}
.logo {}
.nav {}
.rotator {position:absolute; top:0; left:0; z-index:1;}

HTMLは次のようになります。

<div class="wrapper">

  <div class="rotator">
      insert your magic slides of different content or backgrounds here, be in in ul+li format or just divs or whichever method you prefer
  </div><!-- .rotator -->

  <div class="logo-div">

    <div class="logo">
      <img src="image/logo.jpg">
    </div>

    <div class="nav">
     <ul>
       <li>nav-button</li>
     </ul>
    </div><!-- .nav -->

  </div><!--logo div -->

</div><!-- .wrapper -->

ここでの本当の問題は、コンテンツを循環させるためにどのような方法を使用するかということです。彼の方法をコピーするか、変更したいのが背景だけでコンテンツがない場合は、背景の位置を変更するだけです。

.wrapperまたは親要素にはposition：relativeが必要です。そのラッパーの内容、この場合は.logo-divと.rotatorにはposition：relativeが必要です。ナビゲーションバーとロゴの後ろにある.rotator divと、z-index：1が必要なすべてのもの。プラストップ：0; そして左：0; 例として、.rotator divの上にある.logo-divには、z-index：2または9999が必要です。プラストップ：0; そして左：0; 例として

これで、すべてが本来あるべき場所にとどまり、.rotatorのコンテンツはページの残りの部分を台無しにすることなく移動できます。

背景コンテンツ/画像を循環/移動する方法を選択してください。より具体的な回答を提供します。

お役に立てれば

于 2012-02-07T01:09:11.553 に答える