3

これはjqueryです

<script type="text/javascript">
    $(document).ready(function () {
        $('#showhidetarget').hide();

        $('a#showhidetrigger').click(function () {
            $('#showhidetarget').toggle(150);
        });
    });
</script>

これは私の固定ヘッダー ナビゲーション CSS です。

#nav {
    background-color: #001f22;
    height: 30px;
    width: 100%;
    position: fixed;
    list-style-type: none;
    margin-top: 0px;
    margin-bottom: 0;
    float: left;
    margin-right: auto;
    margin-left: auto;

ナビ HTML

  <div id="nav"><ul>
         <li><a href="#home">HOME</a></li>
         <li><a href="#about">ABOUT</a></li>
         <li><a href="#portfolio">PORTFOLIO</a></li>
         <li><a href="#contact">CONTACT</a></li>
  </ul>
  </div>

フェードイン CSS

.fade {
   opacity: 0.5;
   transition: opacity .50s ease-in;
   -moz-transition: opacity .50s ease-in;
   -webkit-transition: opacity .50s ease-in;
   }

   .fade:hover {
    opacity: 1;
      }

   .fade:visited {
    opacity: 1;

      }

基本的に、私のフェードイン/フェードアウトjquery画像は、固定ナビゲーションバーの前にオーバーラップ/移動します。重複しないように修正するにはどうすればよいですか？

4

2 に答える 2

2

NAV バーに z-index を指定し、fadeIn オブジェクトにも指定します。

たとえば、NAV バーの z-index が高いことを確認します。

.fade {
   opacity: 0.5;
   transition: opacity .50s ease-in;
   -moz-transition: opacity .50s ease-in;
   -webkit-transition: opacity .50s ease-in;
   z-index: 10;
   }

#nav {
    background-color: #001f22;
    height: 30px;
    width: 100%;
    position: fixed;
    list-style-type: none;
    margin-top: 0px;
    margin-bottom: 0;
    float: left;
    margin-right: auto;
    margin-left: auto;
    z-index: 20;
}
于 2012-10-22T10:21:18.513 に答える
1

css-property "z-index" について教えてください。要素が一番上に表示される z-index コントロール。z-index が大きい要素は、z-index が小さい要素とオーバーラップします。

たとえば、ヘッダーの z-index を 999 に設定します。

#nav {
    z-index: 999;
}

そして、画像の z-index を下の何かに。

それが役立つことを願っています。

于 2012-10-22T10:19:06.090 に答える