Question

我在父级div中有overflow: hidden的飞机div，所以看起来好像飞机div从页面上的元素下方飞来，并用它拖动横幅。

请参阅我的图表：

Diagram

我已经使用的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的飞机漂浮在我的站点之上吗？我已经尝试过设置z-index，但这似乎不起作用。

Answer 1

可能您应该使用relative+absolute上的position: relative设置container absolute和#plane（带有已定义的z-index）#plane

将top/left/right/bottom与bottom : -<somepixels>, left : 0属性

放在一起

在您开始时top : 0, right : 0
最后你有pointer-events: none

这样做其他元素不会受到飞机存在的影响，保持在你放置的位置

如果你想在飞机后面允许click/hover事件，也可以使用IE<=8：请参阅https://developer.mozilla.org/en/CSS/pointer-events（遗憾的是{{1}}不支持它，尽管已经发布了一些js变通方法，例如，Lea Verou）

在另一个div内浮动一个移动div，溢出隐藏，css修复？

1 个答案: