0

大家，早安，

我好像有点小问题。我想要一个 div 覆盖另一个 div（即在顶部），但 zIndex 不起作用。我怀疑原因是 display: inline-block 但我需要保留它以便网页正确显示。如何使 div 覆盖另一个？

这是解释问题的jsfiddle：

http://jsfiddle.net/Yf7zD/

或者这里的代码：

<!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>

谢谢！

4

2 回答 2

0 
var div = $('<div>', {//Quads
            class: 'iamdroppable',
            id: '1000',
            top: '-100px',
            width: '100px',
            height: '200px',
            zIndex: '1000',
            position: 'absolute',
        }).appendTo('#container');
        });
$('body').append(div);
于 2013-04-25T13:43:24.363 回答
0

您将 CSS 样式添加为属性，它们都应该在 style 属性中：

$(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,
                     style: 'width:62px;height:78px;'
                 }).appendTo('#gameTable');
             }
         }
         $('<div>', { //Quads
             class: 'iamdroppable',
             id: '1000',
             style: 'top:-100px;width:100px;height:200px;z-index:1000;position:absolute;'
         }).appendTo('#container');
     });

另一方面，你在哪里做这个比较：if (vertical == 0)你应该像这样使用三个 === ：if (vertical === 0)

于 2013-04-25T13:43:41.790 回答