плавающий движущийся 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, плавающий над моим сайтом? Я попытался установить z-index, но это, похоже, не работает.

источник

2012-04-23 GT22

вероятно, вы должны использовать позицию relative+absolute установки position: relative на container и absolute (с определенным г-индекса) для #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

Спасибо! Это почти работает, но он делает содержание под двумя divs не clickable :(Любая идея, как это исправить? – GT22

, конечно, см. Мое обновление :) – fcalderan

Спасибо @F. Calderan. Ссылка на события указателей для меня не очень удобна, поскольку она говорит об использовании графики SVG, и я не использую их. Я добавил свой HTML выше, если это помогает? Еще раз спасибо за помощь! :) – GT22

плавающий движущийся div внутри другого div, переполнение скрыто, css исправить?

ответ

Смежные вопросы