1

レスポンシブ サイトで遊んでいて、すべてのメニューとロゴが Coda でうまく機能したとき、Chrome でサイトを試してみたところ、ロゴがヘッダーの後ろに隠れているように見えました。

HTML

<div id="menu">
   <div class="menu">
      <ul>
         <li><a href="#">Prices</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
         <li class="contact"><span>&#9990;</span><a href="#"> 0783 448 5449</a></li>
      </ul>
   </div>
</div>
<div class="container">
<div class="sixteen columns">
   <div id="track">
      <div class="logo"><img src="images/logo-120.png"></div>
   </div>
</div>

CSS:

#menu {
    position: fixed;
    top: 50px;
    height: 50px;
    background-color: rgba(255,255,255,0.9);
    width: 100%;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    text-align: center;
    z-index: 3000;
}

.menu ul li {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
    text-align: center;
    vertical-align: middle;
    padding: 2px 4px 2px 4px;
    background-color: #fff;
    font-size: 130%;
}

#track {
    position: fixed;
    top: 1px;
}

.logo {
    position: relative;
    height: 120px;
    width: 153;
    top: 20px;
    left: 0px;
    z-index: 3500;
}
4

3 に答える 3

0

ヘッダーのposition: fixed上にロゴを表示するには、ヘッダーの z-index が 0 (または負) である必要があります。ただし、提供された内容に基づいて、この問題を確認するためのスタイルがいくつか欠けている可能性があると思います。

http://jsfiddle.net/ExplosionPIlls/MaDe2/1/

于 2013-10-16T17:45:14.287 に答える
0

position:static代わりに与えるだけで解決する同じ問題がありましたposition:relative。

あなたの場合、このクラスを変更するだけです。

`
.logo {
    position: static;
    height: 120px;
    width: 153;
    top: 20px;
    left: 0px;
    z-index: 3500;
}`
于 2016-06-22T08:23:49.437 に答える