0

私は私のガールフレンドのためにウェブサイトに取り組んでいます。しかし、ロゴの配置に行き詰まっています。

これが私が話しているウェブサイトです：

http://xntriek-test.s3-website-eu-west-1.amazonaws.com/

z-indexes を使用してみましたが、うまくいきません。本体の背景画像も設定してみました。しかし、私は画像のサイズを制限しています。これをまとめるため、Twitter ブートストラップを使用しています。

現時点では、これは私がロゴに使用しているクラスです:

.logo{
  position: absolute;
  top: 25px;
  left: 25px;
  height: 45%;
  width: 30%;
  z-index: 1;
}

現時点では、メイン コンテンツの横にあるスパンに画像を配置しています。しかし、私は position: absolute を使用しているため、これを入れても違いはありません。

私がこれを解決する方法を誰かが考えているなら、おそらく別のアプローチで私は今やっています. どんな助けでも大歓迎です!

4

3 に答える 3

0

まず、css でロゴを歪めます。画像をレスポンシブな要素に配置したい場合は、この absolut を配置して、画像のサイズを調整します。

#logoContainer {
 position:absolute;
 top:25px;
 left:25px;
 width:30%;
 z-index:-1;
}     

img.logo{
 width:100%;
 height:auto;
}

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

<div id="logoContainer">
 <img src="yoursrc/logo.gif" alt="The Logo" class="logo" />
</div>

他の要素ではなく、 body タグの開始直後にこれを配置します。他の要素に配置することで、ロゴはその z-index を継承し、ページ全体ではなく、親内の z-positioning にのみ影響を与えることができます。

于 2013-04-22T20:08:29.660 に答える
0

z-index 属性を使用する際の注意点:

「位置」属性 (相対、絶対、または固定) を使用して配置された要素のみが、「z-index」の影響を受ける可能性があります。

したがって、問題を解決したい場合は、ロゴを背景画像として配置するか、コンテンツの CSS の位​​置を使用してください。

于 2013-04-22T20:09:04.983 に答える