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:
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);