Home/ Questions/Q 7838841
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T15:13:51+00:00

I have a div of an aeroplane inside parent div with overflow: hidden ,

  • 0

I have a div of an aeroplane inside parent div with overflow: hidden, so it looks as though the aeroplane div is flying from under an element on the page and dragging a banner with it.

See my diagram here:

Diagram

The css code I have already is:

#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;
}

And the 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>

but this is displaying as a block pushing the other elements below these divs down the page.

Do you know of a way to fix this so the plane and it’s containing div is floating above my site? I’ve tried setting the z-index, but that doesn’t seem to work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    probably you should use position relative+absolute setting position: relative on the container and absolute (with a defined z-index) for the #plane

    place the #plane with top/left/right/bottom properties

    • at the begin you have bottom : -<somepixels>, left : 0
    • at the end you have top : 0, right : 0

    Doing so other elements won’t be affected by the presence of the plane, staying where you placed them

    Use also pointer-events: none if you want to allow click/hover events behind the plane: see https://developer.mozilla.org/en/CSS/pointer-events (unfortunately it’s not supported by IE<=8although some js workarounds have been published, e.g. by Lea Verou)

    • 0