javascript - Display-inline-block with z-index and jquery -


good morning everyone,

i seem having slight problem. want div overlay div(i.e. on top) zindex not working. suspect cause display: inline-block need keep webpage displayed properly. how make div overlay other one?

here jsfiddle explaining problem:

http://jsfiddle.net/yf7zd/

or code right here:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>untitled document</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> <script type="text/javascript" src="javascript/cookies.js"></script> <style> #gametable {     font-size: 0;     width: 840px;     height: 240px;     margin-top: 20px;     margin-left: 78px;     position: relative; } .iamdroppable {     display: inline-block;     margin: 0;     padding: 0;     border: 3px solid #fff; }  </style> </head>  <body style="background-color: black;"> <div id="container" style="position:relative; border: solid 3px red;"> <div id="gametable"><p>gametable</p> </div> </div> </body> <script> $(document).ready(function(e) { var myid;     for(vertical = 0; vertical < 3; vertical++) {     for(horizontal = 1; horizontal <= 12; horizontal++) { //outer numbers             if(vertical == 0)             myid = horizontal * 3;             else if(vertical == 1)             myid = horizontal * 3 - 1;             else             myid = horizontal * 3 - 2;             $('<div>', {//normal numbers                 class: 'iamdroppable',                 id: '' + myid,                 width: '62px',                 height: '78px',             }).appendto('#gametable');     }     }     $('<div>', {//quads                 class: 'iamdroppable',                 id: '1000',                 top: '-100px',                 width: '100px',                 height: '200px',                 zindex: '1000',                 position: 'absolute',             }).appendto('#container');             }); </script> </html> 

thanks!

var div = $('<div>', {//quads             class: 'iamdroppable',             id: '1000',             top: '-100px',             width: '100px',             height: '200px',             zindex: '1000',             position: 'absolute',         }).appendto('#container');         }); $('body').append(div); 

Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -