在另一個div內浮動移動div，溢出隱藏，css修復？

我有一個飛機div div overflow: hidden，因此它看起來好像飛機div從頁面上的元素下面飛行並拖動橫幅。在另一個div內浮動移動div，溢出隱藏，css修復？

在這裏看到我的圖：

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下面的其他元素推向頁面。

你知道一種方法來解決這個問題，所以飛機和它包含div浮在我的網站之上嗎？我試過設置z-index，但這似乎不起作用。

來源

2012-04-23 GT22

或許你應該使用位置relative+absolute在container和absolute設置position: relative（具有定義的z-index）爲#plane

地方#plane與top/left/right/bottom性質

在開始你有bottom : -<somepixels>, left : 0
最後你有top : 0, right : 0

這樣做的其他元素不會被平面的存在的影響，住在這裏您將它們放置

使用也pointer-events: none如果你想允許後面的平面click/hover事件：看到https://developer.mozilla.org/en/CSS/pointer-events（遺憾的是它不支持通過IE<=8儘管一些js變通辦法已經發布，例如by Lea Verou）

來源

2012-04-23 14:01:09 fcalderan

謝謝！這幾乎可以工作，但它使兩個div下面的內容不可點擊:(任何想法如何修復？ – GT22 2012-04-23 14:09:54

當然，請參閱我的更新:) – fcalderan 2012-04-23 14:11:28

謝謝@F。 Calderan - 指針事件鏈接對我來說似乎沒什麼用處，因爲它談到了使用SVG圖形，而我沒有使用它們。我已經添加了我的HTML如果有幫助嗎？再次感謝您的幫助！ :) – GT22 2012-04-23 14:18:32

在另一個div內浮動移動div，溢出隱藏，css修復？

回答

相關問題