我试图将圣诞老人gif移到左侧。到目前为止，我只输入了左箭头的代码，但无法移动。我将div中的箭头图标设置为z索引为30（高于页面上的所有其他元素），因此不应该这样。任何帮助深表感谢！！！！
Here是到目前为止游戏外观的链接，而here是我的外部样式表。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Santa Game</title>
<link rel="stylesheet" href="index.css">
<script>
var top = 350
var left = 1250
function move(rightorleft)
{
if(rightorleft == 'left')
{
document.getElementById("santa").style.position="absolute"
left = left - 10
document.getElementById("santa").style.left=left+"px"
}
else if(rightorleft == 'right')
{
document.getElementById("santa").style.position="absolute"
left = left + 10
document.getElementById("santa").style.left=left+"px"
}
}
</script>
</head>
<body>
<table>
<tr id="top">
<td>
<p id="p1">Help Santa avoid storms and the eyes of curious children to deliver all the presents on time!</h1>
<p id="p2">Santa score: 0</p>
</td>
</tr>
<tr>
<td id="middle">
<img class="clouds1" id="cloud1" src="cloud.png" width="200px">
<img class="clouds1" id="cloud2" src="cloud.png" width="200px">
<img class="clouds1" id="cloud3" src="cloud.png" width="200px">
<img class="clouds1" id="cloud4" src="cloud.png" width="200px">
<img class="clouds1" id="cloud5" src="cloud.png" width="200px">
<img class="storms" id="storm1" src="storm.png" width="150px">
<img class="storms" id="storm2" src="storm.png" width="150px">
<img class="storms" id="storm3" src="storm.png" width="150px">
<img class="storms" id="storm4" src="storm.png" width="150px">
<img class="clouds2" id="cloud7" src="cloud.png" width="150px">
<img class="clouds2" id="cloud8" src="cloud.png" width="150px">
<img class="clouds2" id="cloud9" src="cloud.png" width="150px">
<img class="clouds2" id="cloud10" src="cloud.png" width="150px">
<img class="clouds2" id="cloud11" src="cloud.png" width="150px">
<img class="clouds2" id="cloud12" src="cloud.png" width="150px">
<img class="clouds2" id="cloud6" src="cloud.png" width="150px">
<img id="santa" src="santa.gif" width="250px">
<img id="hill" src="hill.png" width="785px" height="100px">
<div id="kids"><img class="kids" id="kid1" src="kid1.png" width="100px">
<img class="kids" id="kid2" src="kid2.png" width="100px">
<img class="kids" id="kid3" src="kid3.png" width="100px">
<img class="kids" id="kid4" src="kid4.png" width="100px">
<img class="kids" id="kid5" src="kid5.png" width="100px"></div>
<div id="houses"><img class="houses" id="house1" src="house.gif" width="150px">
<img class="houses" id="house2" src="house.gif" width="150px">
<img class="houses" id="house3" src="house.gif" width="150px">
<img class="houses" id="house4" src="house.gif" width="150px">
<img class="houses" id="house5" src="house.gif" width="150px"></div>
</td>
</tr>
<tr>
<td id="bottom">
<div id="arrows">
<img src="up.png" width="30px"><br>
<img src="left.png" width="30px" onClick="move('left')">
<img src="right.png" width="30px"><br>
<img src="down.png" width="30px">
</div>
<div>
<button type="button">Start (Easy)</button>
<button type="button">Start (Hard)</button>
</div>
</td>
</tr>
</body>
最佳答案
您好，您的代码中有一些CSS问题，我已经解决了。
您可以检查以下链接。
"https://jsfiddle.net/spankajd/tbjxba99/"