4

レイアウトが次のようなWebサイトを持っています:(下の画像）

ここに画像の説明を入力してください

左側のパネルには、ロゴを表示するdivがあります。ロゴの下に配置したい別のdivがあるので、divsこれらを互いに積み重ねる必要があります。z-indexをいじってみましたが、必要なものがうまくいきませんでした。これはどのように行うことができますか？

4

5 に答える 5

2

うまくいかない場合は、次のようなラッパーz-indexにロゴをネストしてみてください<div><div>

<div> <!--div container to hold the logo div-->
 <div><!--Logo div--></div>
</div>
于 2012-07-21T08:14:10.500 に答える
2

参照： jsFiddleロゴデモ

ステータスの更新： jsFiddleロゴデモJust Border Version

上記のjsFiddleのCSSセクションには詳細な注記があるため、特定のロゴを設定する方法を理解できます。

HTML：

<div id="logoHolder">
    <div id="logoContent">
      <div id="logoImage"></div>
    </div>
</div>

CSS：

#logoHolder {
    width: 296px;
    height: 296px;
    background-color: white;
    border: 3px solid red;
}

#logoContent {
    width: 256px;
    height: 256px;
    padding: 20px;
    position: relative;
    border: 1px solid black;
}

#logoImage {
    background-image:url(http://img841.imageshack.us/img841/4718/securitysealred256x256.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: aqua;
    height: 100%;
}
于 2012-07-21T10:12:46.153 に答える
1

位置も使用してみてください：絶対; z-indexを使用する場合、両方の要素の相対ではなく。次に、レイアウトに歪みが生じる可能性があるため、ロゴdivを別の相対div内に配置するか、他の手法を使用して修正できますが、絶対位置とz-indexを使用する場合は機能する必要があります。それでも機能しない場合は、JavaScriptの一部が干渉していないか、コード内の他の要素にz-indexがあるかどうかを確認してください。これにより、問題が発生しています。

絶対位置を使用する場合は、 margin-leftとmargin-topを定義することを忘れないでください。

于 2012-07-21T08:15:13.760 に答える
1

何を達成したいかわかりませんが、これを試して、値をレイアウトに適合させてください

于 2012-07-21T08:22:24.080 に答える
0

margin画像に示されているように、プロパティを使用してみてください。右側のdivにmargin-left負の値を指定すると、右側のdivはロゴのdivの下/上に移動します。

于 2012-07-21T08:13:24.177 に答える