0

親 div 内に飛行機の div があるoverflow: hiddenため、飛行機 div がページの要素の下から飛んでいて、バナーをドラッグしているように見えます。

ここで私の図を見てください：

ダイアグラム

私がすでに持っているcssコードは次のとおりです。

#plane{
width: 195px;
background-image: url(images/plane.png);
background-repeat: no-repeat;
height: 444px;
float: left;
position: relative;
top: 0px;
left: 0px;
}
#plane-holder {
height: 569px;
width: 960px;
overflow: hidden;
z-index: 2200;
display: inherit;
}

そしてHTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Netball Plane</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="header"><div id="topbar"><img src="images/contact-us-bar.gif" width="960" height="45" /></div>
</div>
<div id="content"><div id="mainbody"><div id="menubar"><div id="logo"><img     src="images/logo.gif" width="284" height="103" /></div>
<div class="menu">
Menu to go here
</div>
</div>
</div><div id="hero"><div id="information-that"><h1>Hello welcome to the site</h1>
<p></p><p>Some more text here.</p>
<p><img src="images/netball.png" alt="Rollover the netball for more information"     width="187" height="46" border="0" /></p>
</div>
</div><div id="hero-shadow"></div><script type="text/javascript">
       $(function(){
    var iCounter = 1;
    var iMaxCounter = 4;

        $( '#plane' ).animate({ 
            top: "-=450px",
            left: "+=857px"
        }, 30000, function(){
        }       
        ); 
    $('.slideshow').cycle({
      fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
      after:onAfter
    });

});
        </script>
<div id="plane-holder"><div id="plane"></div>
</div><div id="base-content"><div id="footer"></div>
</body>
</html>

しかし、これはこれらのdivの下にある他の要素をページの下に押し込むブロックとして表示されています。

これを修正する方法を知っているので、飛行機とそれに含まれる div が私のサイトの上に浮かんでいますか? z-index を設定しようとしましたが、うまくいかないようです。

4

1 に答える 1

3

おそらく、および(定義済みの z インデックスを使用して)の位置relative+absolute設定を使用する必要があります。position: relativecontainerabsolute#plane

#planeをtop/left/right/bottomプロパティ付きで配置

  • 最初にあなたが持っているbottom : -<somepixels>, left : 0
  • 最後にあなたが持っているtop : 0, right : 0

そうすることで、他の要素は平面の存在の影響を受けず、配置した場所にとどまります

プレーンの背後でイベントpointer-events: noneを許可する場合にも使用してください: https://developer.mozilla.org/en/CSS/pointer-eventsを参照してください(残念ながら、Lea Verou などによっていくつかの js 回避策が公開されていますが、によってサポートされていません)。click/hoverIE<=8

于 2012-04-23T14:01:09.827 に答える