Z-Index不包括底部元素

时间：2018-01-09 08:37:40

标签： javascript jquery html css

好吧所以我有一个Rock Paper Scissors游戏，当你选择摇滚和电脑选择纸张时，它会在中间相遇。然而，由于纸张击打岩石，我想要纸张覆盖岩石。不幸的是，即使我正在更改z-index（在纸面上更高），它也不会覆盖它。

看看：

＆＃13;
＆＃13; 
$(function() {
    $('img[src="https://cdn.rawgit.com/000webhost/logo/e9bd13f7/footer-powered-by-000webhost-white2.png"]').css("display", "none");
    var madeChoice = false;
    var selection = 0;
    $("#playerRock").click(function() {
        if (madeChoice === false) {
            selection = 1;
            madeChoice = true;
            $("#playerPaper").animate({
                opacity: 0,
                marginTop: "+=100"
            }, 800, function() {
                $("#playerPaper").css("display", "none");
            });
            $("#playerScissors").animate({
                opacity: 0,
                marginTop: "+=100"
            }, 800, function() {
                $("#playerScissors").css("display", "none");
            });
            setTimeout(function() {
                $("#mainTitle").html("You selected rock");
                $("#playerRock").css("margin-left", "-=290");
                $("#playerRock").animate({
                    marginLeft: "+=290"
                }, 800);
            }, 800);
        }
    });
    $("#playerScissors").click(function() {
        if (madeChoice === false) {
            selection = 2;
            madeChoice = true;
            $("#playerRock").animate({
                opacity: 0,
                marginTop: "+=100"
            }, 800, function() {
                $("#playerRock").css("display", "none");
            });
            $("#playerPaper").animate({
                opacity: 0,
                marginTop: "+=100"
            }, 800, function() {
                $("#playerPaper").css("display", "none");
            });
            setTimeout(function() {
                $("#mainTitle").html("You selected scissors");
                $("#playerScissors").css("margin-left", "+=290");
                $("#playerScissors").animate({
                    marginLeft: "-=290"
                }, 800);
            }, 800);
        }
    });
    $("#playerPaper").click(function() {
        if (madeChoice === false) {
            selection = 3;
            madeChoice = true;
            $("#playerRock").animate({
                opacity: 0,
                marginTop: "+=100"
            }, 800, function() {
                $("#playerRock").css("display", "none");
            });
            $("#playerScissors").animate({
                opacity: 0,
                marginTop: "+=100"
            }, 800, function() {
                $("#playerScissors").css("display", "none");
            });
            setTimeout(function() {
                $("#mainTitle").html("You selected paper");
            }, 800);
        }
    });
    var started = false;
    setInterval(function() {
        if (madeChoice === true && started === false) {
            started = true;
            var number = 0; //Math.floor((Math.random() * 3));
            setTimeout(function() {
                if (number === 0) {
                    $("#computerRock").animate({
                        opacity: 0,
                        marginTop: "+=100"
                    }, 800, function() {
                        $("#computerRock").css("display", "none");
                    });
                    $("#computerScissors").animate({
                        opacity: 0,
                        marginTop: "+=100"
                    }, 800, function() {
                        $("#computerScissors").css("display", "none");
                    });
                    $("#bottomHalf").animate({
                        marginTop: "-=100"
                    }, 800, function() {
                        $("#bottomHalf").css("margin-top", "+=100");
                    });
                    setTimeout(function() {
                        $("#mainTitle").html("The computer selected paper");
                    }, 800);
                }
                else if (number == 1) {
                    $("#computerRock").animate({
                        opacity: 0,
                        marginTop: "+=100"
                    }, 800, function() {
                        $("#computerRock").css("display", "none");
                    });
                    $("#computerPaper").animate({
                        opacity: 0,
                        marginTop: "+=100"
                    }, 800, function() {
                        $("#computerPaper").css("display", "none");
                    });
                    $("#bottomHalf").animate({
                        marginTop: "-=100"
                    }, 800, function() {
                        $("#bottomHalf").css("margin-top", "+=100");
                    });
                    setTimeout(function() {
                        $("#mainTitle").html("The computer selected scissors");
                        $("#computerScissors").css("margin-left", "+=290");
                        $("#computerScissors").animate({
                            marginLeft: "-=290"
                        }, 800);
                    }, 800);
                }
                else if (number == 2) {
                    $("#computerPaper").animate({
                        opacity: 0,
                        marginTop: "+=100"
                    }, 800, function() {
                        $("#computerPaper").css("display", "none");
                    });
                    $("#computerScissors").animate({
                        opacity: 0,
                        marginTop: "+=100"
                    }, 800, function() {
                        $("#computerScissors").css("display", "none");
                    });
                    $("#bottomHalf").animate({
                        marginTop: "-=100"
                    }, 800, function() {
                        $("#bottomHalf").css("margin-top", "+=100");
                    });
                    setTimeout(function() {
                        $("#mainTitle").html("The computer selected rock");
                        $("#computerRock").css("margin-left", "-=290");
                        $("#computerRock").animate({
                            marginLeft: "+=290"
                        }, 800);
                    }, 800);
                }
            }, 3800);
            // Identify if you selected rock and the computer selected paper (for now the computer always selects paper)
            setTimeout(function() {
                if (number === 0 && selection == 1) {
                   $("#computerPaper").css("z-index", "50");
                   $("#playerRock").css("z-index", "2");
                   /*$("#computerPaper").animate({
                       marginTop: "+=165"
                   }, 800);*/
                   $("hr").animate({
                       marginTop: "-=165",
                       marginBottom: "-=165"
                   }, 800);
                   $("#topHalf").animate({
                       marginBottom: "+=165"
                   }, 800);
                }
                else if (number === 0 && selection == 2) {
                    alert("2");
                }
                else if (number === 0 && selection == 3) {
                    alert("3");
                }
                else if (number == 1 && selection == 1) {
                    alert("4");
                }
                else if (number == 1 && selection == 2) {
                    alert("5");
                }
                else if (number == 1 && selection == 3) {
                    alert("6");
                }
                else if (number == 2 && selection == 1) {
                    alert("7");
                }
                else if (number == 2 && selection == 2) {
                    alert("8");
                }
                else if (number == 2 && selection == 3) {
                    alert("9");
                }
                else {
                    alert("Error");
                }
            }, 5300);
        }
    }, 1);
});
＆＃13; 
body {
    background: #EDEDED;
}
#mainTitle {
    font-family: 'Muli', sans-serif;
    font-size: 54px;
}
.lowerTitle {
    font-family: 'Muli', sans-serif;
    font-size: 32px;
}
.scoreTitle {
    font-family: 'Muli', sans-serif;
    font-size: 20px;
    display: inline-block;
}
#scoreTitle2 {
    margin-right: 20px;
    margin-left: 20px;
}
.scoreBox {
    margin-top: 10px;
    border: 2px solid #AAAAAA;
    width: 50px;
    height: 20px;
}
.scoreBox:focus {
    outline: none;
    font-family: 'Muli', sans-serif;
    text-align: center;
}
.image {
    height: 75px;
    width: 75px;
}
#computerRock, #computerPaper, #computerScissors {
    z-index: 2;
    display: inline-block;
    background: #878787;
    padding: 20px;
    border-radius: 50%;
    border: 3px solid #D01A14;
    vertical-align: top;
}
#playerRock, #playerPaper, #playerScissors {
    z-index: 2;
    cursor: pointer;
    background: #878787;
    padding: 20px;
    display: inline-block;
    border-radius: 50%;
    border: 3px solid #095BB3;
    top: 0px;
    vertical-align: top;
}
#computerPaper, #playerPaper {
    margin-right: 30px;
    margin-left: 30px;
}
hr {
    margin-top: 100px;
    margin-bottom: 100px;
    height: 4px;
    background: #5E5E5E;
    border: none;
    width: 90%;
    z-index: 1;
}
#lowerTitlePlayer {
    vertical-align: top;
}
＆＃13; 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>repl.it</title>
        <link href="index.css" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <div id = "topHalf">
            <center><div id = "mainTitle">Please make a selection</div></center><br><br>
            <center>
                <div class = "scoreTitle">You</div>
                <div class = "scoreTitle" id = "scoreTitle2">Tie</div>
                <div class = "scoreTitle">Cpu</div>
            </center>
            <center>
                <input class = "scoreBox" id = "scoreBox1" type = "text" disabled>
                <input class = "scoreBox" id = "scoreBox2" type = "text" disabled>
                <input class = "scoreBox" id = "scoreBox3" type = "text" disabled>
            </center><br><br><br>
        </div>
        <center>
            <div id = "computerRock">
                <img class = "image" src = "https://image.ibb.co/kojZ1b/rock.png">
            </div>
            <div id = "computerPaper">
                <img class = "image" src = "https://image.ibb.co/ePRQ7G/paper.png">
            </div>
            <div id = "computerScissors">
                <img class = "image" src = "https://image.ibb.co/iqgE1b/scissors.png">
            </div>
        </center>
        <div id = "bottomHalf">
            <center><hr></center>
            <center>
                <div id = "playerRock">
                    <img class = "image" src = "https://image.ibb.co/kojZ1b/rock.png">
                </div>
                <div id = "playerPaper">
                    <img class = "image" src = "https://image.ibb.co/ePRQ7G/paper.png">
                </div>
                <div id = "playerScissors">
                    <img class = "image" src = "https://image.ibb.co/iqgE1b/scissors.png">
                </div>
            </center>
        </div>
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

为什么要这样做？

2 个答案:

答案 0 :(得分：1)

z-index仅适用于定位元素（https://developer.mozilla.org/en-US/docs/Web/CSS/z-index），默认情况下，html元素继承静态位置，您必须设置为相对定位。

#computerRock, #computerPaper, #computerScissors,
#playerRock, #playerPaper, #playerScissors {
  position: relative;
}

答案 1 :(得分：0)

中心部分css的正常问题。

更改中心部分css。

在tophalft div之后将第一个中心部分位置改为相对。

div#topHalf+center { position: relative; }

＆＃13;
＆＃13; 
$(function() {
    $('img[src="https://cdn.rawgit.com/000webhost/logo/e9bd13f7/footer-powered-by-000webhost-white2.png"]').css("display", "none");
    var madeChoice = false;
    var selection = 0;
    $("#playerRock").click(function() {
        if (madeChoice === false) {
            selection = 1;
            madeChoice = true;
            $("#playerPaper").animate({
                opacity: 0,
                marginTop: "+=100"
            }, 800, function() {
                $("#playerPaper").css("display", "none");
            });
            $("#playerScissors").animate({
                opacity: 0,
                marginTop: "+=100"
            }, 800, function() {
                $("#playerScissors").css("display", "none");
            });
            setTimeout(function() {
                $("#mainTitle").html("You selected rock");
                $("#playerRock").css("margin-left", "-=290");
                $("#playerRock").animate({
                    marginLeft: "+=290"
                }, 800);
            }, 800);
        }
    });
    $("#playerScissors").click(function() {
        if (madeChoice === false) {
            selection = 2;
            madeChoice = true;
            $("#playerRock").animate({
                opacity: 0,
                marginTop: "+=100"
            }, 800, function() {
                $("#playerRock").css("display", "none");
            });
            $("#playerPaper").animate({
                opacity: 0,
                marginTop: "+=100"
            }, 800, function() {
                $("#playerPaper").css("display", "none");
            });
            setTimeout(function() {
                $("#mainTitle").html("You selected scissors");
                $("#playerScissors").css("margin-left", "+=290");
                $("#playerScissors").animate({
                    marginLeft: "-=290"
                }, 800);
            }, 800);
        }
    });
    $("#playerPaper").click(function() {
        if (madeChoice === false) {
            selection = 3;
            madeChoice = true;
            $("#playerRock").animate({
                opacity: 0,
                marginTop: "+=100"
            }, 800, function() {
                $("#playerRock").css("display", "none");
            });
            $("#playerScissors").animate({
                opacity: 0,
                marginTop: "+=100"
            }, 800, function() {
                $("#playerScissors").css("display", "none");
            });
            setTimeout(function() {
                $("#mainTitle").html("You selected paper");
            }, 800);
        }
    });
    var started = false;
    setInterval(function() {
        if (madeChoice === true && started === false) {
            started = true;
            var number = 0; //Math.floor((Math.random() * 3));
            setTimeout(function() {
                if (number === 0) {
                    $("#computerRock").animate({
                        opacity: 0,
                        marginTop: "+=100"
                    }, 800, function() {
                        $("#computerRock").css("display", "none");
                    });
                    $("#computerScissors").animate({
                        opacity: 0,
                        marginTop: "+=100"
                    }, 800, function() {
                        $("#computerScissors").css("display", "none");
                    });
                    $("#bottomHalf").animate({
                        marginTop: "-=100"
                    }, 800, function() {
                        $("#bottomHalf").css("margin-top", "+=100");
                    });
                    setTimeout(function() {
                        $("#mainTitle").html("The computer selected paper");
                    }, 800);
                }
                else if (number == 1) {
                    $("#computerRock").animate({
                        opacity: 0,
                        marginTop: "+=100"
                    }, 800, function() {
                        $("#computerRock").css("display", "none");
                    });
                    $("#computerPaper").animate({
                        opacity: 0,
                        marginTop: "+=100"
                    }, 800, function() {
                        $("#computerPaper").css("display", "none");
                    });
                    $("#bottomHalf").animate({
                        marginTop: "-=100"
                    }, 800, function() {
                        $("#bottomHalf").css("margin-top", "+=100");
                    });
                    setTimeout(function() {
                        $("#mainTitle").html("The computer selected scissors");
                        $("#computerScissors").css("margin-left", "+=290");
                        $("#computerScissors").animate({
                            marginLeft: "-=290"
                        }, 800);
                    }, 800);
                }
                else if (number == 2) {
                    $("#computerPaper").animate({
                        opacity: 0,
                        marginTop: "+=100"
                    }, 800, function() {
                        $("#computerPaper").css("display", "none");
                    });
                    $("#computerScissors").animate({
                        opacity: 0,
                        marginTop: "+=100"
                    }, 800, function() {
                        $("#computerScissors").css("display", "none");
                    });
                    $("#bottomHalf").animate({
                        marginTop: "-=100"
                    }, 800, function() {
                        $("#bottomHalf").css("margin-top", "+=100");
                    });
                    setTimeout(function() {
                        $("#mainTitle").html("The computer selected rock");
                        $("#computerRock").css("margin-left", "-=290");
                        $("#computerRock").animate({
                            marginLeft: "+=290"
                        }, 800);
                    }, 800);
                }
            }, 3800);
            // Identify if you selected rock and the computer selected paper (for now the computer always selects paper)
            setTimeout(function() {
                if (number === 0 && selection == 1) {
                   $("#computerPaper").css("z-index", "50");
                   $("#playerRock").css("z-index", "2");
                   /*$("#computerPaper").animate({
                       marginTop: "+=165"
                   }, 800);*/
                   $("hr").animate({
                       marginTop: "-=165",
                       marginBottom: "-=165"
                   }, 800);
                   $("#topHalf").animate({
                       marginBottom: "+=165"
                   }, 800);
                }
                else if (number === 0 && selection == 2) {
                    alert("2");
                }
                else if (number === 0 && selection == 3) {
                    alert("3");
                }
                else if (number == 1 && selection == 1) {
                    alert("4");
                }
                else if (number == 1 && selection == 2) {
                    alert("5");
                }
                else if (number == 1 && selection == 3) {
                    alert("6");
                }
                else if (number == 2 && selection == 1) {
                    alert("7");
                }
                else if (number == 2 && selection == 2) {
                    alert("8");
                }
                else if (number == 2 && selection == 3) {
                    alert("9");
                }
                else {
                    alert("Error");
                }
            }, 5300);
        }
    }, 1);
});
＆＃13; 
body {
    background: #EDEDED;
}
#mainTitle {
    font-family: 'Muli', sans-serif;
    font-size: 54px;
}
.lowerTitle {
    font-family: 'Muli', sans-serif;
    font-size: 32px;
}
.scoreTitle {
    font-family: 'Muli', sans-serif;
    font-size: 20px;
    display: inline-block;
}
#scoreTitle2 {
    margin-right: 20px;
    margin-left: 20px;
}
.scoreBox {
    margin-top: 10px;
    border: 2px solid #AAAAAA;
    width: 50px;
    height: 20px;
}
.scoreBox:focus {
    outline: none;
    font-family: 'Muli', sans-serif;
    text-align: center;
}
.image {
    height: 75px;
    width: 75px;
}
#computerRock, #computerPaper, #computerScissors {
    z-index: 2;
    display: inline-block;
    background: #878787;
    padding: 20px;
    border-radius: 50%;
    border: 3px solid #D01A14;
    vertical-align: top;
}
#playerRock, #playerPaper, #playerScissors {
    z-index: 2;
    cursor: pointer;
    background: #878787;
    padding: 20px;
    display: inline-block;
    border-radius: 50%;
    border: 3px solid #095BB3;
    top: 0px;
    vertical-align: top;
}
#computerPaper, #playerPaper {
    margin-right: 30px;
    margin-left: 30px;
}
hr {
    margin-top: 100px;
    margin-bottom: 100px;
    height: 4px;
    background: #5E5E5E;
    border: none;
    width: 90%;
    z-index: 1;
}
#lowerTitlePlayer {
    vertical-align: top;
}
div#topHalf+center {
    position: relative;
 }
＆＃13; 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>repl.it</title>
        <link href="index.css" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <div id = "topHalf">
            <center><div id = "mainTitle">Please make a selection</div></center><br><br>
            <center>
                <div class = "scoreTitle">You</div>
                <div class = "scoreTitle" id = "scoreTitle2">Tie</div>
                <div class = "scoreTitle">Cpu</div>
            </center>
            <center>
                <input class = "scoreBox" id = "scoreBox1" type = "text" disabled>
                <input class = "scoreBox" id = "scoreBox2" type = "text" disabled>
                <input class = "scoreBox" id = "scoreBox3" type = "text" disabled>
            </center><br><br><br>
        </div>
        <center>
            <div id = "computerRock">
                <img class = "image" src = "https://image.ibb.co/kojZ1b/rock.png">
            </div>
            <div id = "computerPaper">
                <img class = "image" src = "https://image.ibb.co/ePRQ7G/paper.png">
            </div>
            <div id = "computerScissors">
                <img class = "image" src = "https://image.ibb.co/iqgE1b/scissors.png">
            </div>
        </center>
        <div id = "bottomHalf">
            <center><hr></center>
            <center>
                <div id = "playerRock">
                    <img class = "image" src = "https://image.ibb.co/kojZ1b/rock.png">
                </div>
                <div id = "playerPaper">
                    <img class = "image" src = "https://image.ibb.co/ePRQ7G/paper.png">
                </div>
                <div id = "playerScissors">
                    <img class = "image" src = "https://image.ibb.co/iqgE1b/scissors.png">
                </div>
            </center>
        </div>
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题