0

状況の簡単なスケッチ: 私はウェブサイトを作成しているので (明らかに :))、ヘッダー、バナー、バナーの下にメニュー バーがあります。ただし、バナーがヘッダーに少し重なっています (これが意図です;))。バナーのすぐ下にメニュー バーを追加したいと考えています。

これが私のCSSコードです：

.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}

.banner {
position: relative;
top: -90px;
background: url(../images/banner.png) no-repeat top center;
height: 210px;
}

.menu {
background: url(../images/menubalk.png) no-repeat top center;

}

バナーがオーバーラップしない場合、メニューバーは i の位置にあります。

私はちょうど私の問題全体をおそらく解決する小さな何かを考え出した. ヘッダーをボックスにして、メイン コンテンツをボックス (バナー、コンテンツ、フッターを保持する) にして、そのボックスのバナーの子など、さまざまなものをすべて作成するとしたら? 継承またはその他の関数を使用している間、それで問題全体が解決しないでしょうか?

前もって感謝します！敬具、デビッド

4

3 に答える 3

1

メニューにも相対位置を割り当てる必要があります。バナーと同じトップ値

 .menu {
    ....
    ....
    position: relative;
    top:-90px;
  }

表示されるスペースは、通常のドキュメント フローでは、バナーが配置されている場所のすぐ下にメニューが配置されるためです。(これは実際の位置から 90px 上にシフトされています)

ここでフィドル

画像の代わりに背景色を使用しました メニューはバナーの一番下または必要な場所に配置できます。次に、メニューに続く要素は、メニューを実際の位置に表示することを覚えておいてください。この場合、下の 90px です。この問題をすべてラップする多くのソリューションは、残りのページ要素には影響しません。

于 2013-03-15T11:35:56.510 に答える
1

あなたの場合の1つの解決策は、メニューを絶対に配置することbottom:-120pxです。それは最もエレガントなものではありませんが、うまくいくはずです。

于 2013-03-15T11:28:16.203 に答える
1

これを行う 1 つの方法が提案されています。それは、メニュー要素に相対的な配置を使用することです。

例えば：

<div class="header_container">
    Le Header Container
</div>
<div class="banner">
    Le Banner
</div>
<div class="menu">
    Le Menu
</div>

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

.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}

.banner {
background-color: yellow;
position: relative;
top: -90px;
height: 210px;
}

.menu {
background-color: red;
position: relative;
top: -90px;
height: 50px;
}

手始めに、ここにフィドルがあります: http://jsfiddle.net/audetwebdesign/9gvTG/

別の方法
負のマージンを使用して、同様の効果を得ることができます。 

.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
margin-bottom: -90px; // only need to adjust this property
}

.banner {
background-color: yellow;
position: relative;
height: 210px;
}

.menu {
background-color: red;
position: relative;
height: 50px;
}

このアプローチの利点は、ヘッダーを変更し、バナー要素によるオーバーラップの程度を変更する必要がある場合に、後続の要素の配置を調整する必要がないことです。

両方のアプローチを認識することは良いことです。

于 2013-03-15T11:48:28.010 に答える