我正在研究这个代码,并且可以使用复杂的代码将按钮放在我想要的位置,但我只是想让它变得更简单。我现在可以将按钮放在图像上并改变其边缘顶部位置,但我无法改变其边距左侧位置。我想要这个星球的每个按钮,但正如我所说,我不能用简单的代码将它放在行星的位置。
关于问题在哪里的任何想法?
.upfront {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-left: 155px;
margin-right: 23px;
}
.menu {}
.spaceBoard {
position: relative;
}
.previews {
left: 173px;
position: releative;
}
.button {
position: absolute;
margin-left: 215;
margin-top: 315px;
z-index: 2;
border-radius: 50%;
border: none;
}

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body background="https://i.hizliresim.com/DyZ49m.png">
<script>
function bgClicked() {
var id = document.getElementById("bgClicked");
id.style.visibility = "visible";
document.getElementById("bgMAIN").style.display = "none";
}
</script>
<center>
<div class="upper"><img src="https://i.hizliresim.com/vJ9n5m.png" width="75%" height="75%" /></div>
<!--//<div><img src="Pics/2_.png" style="right:9px; top:12 position:relative;" /></div>-->
<div class="spaceBoard">
<input type="button" class="button" />
<img src="https://i.hizliresim.com/Eyo5pB.png" id="bgMAIN" onclick="bgClicked()">
<img src="https://i.hizliresim.com/mJB15Z.png" style="visibility:hidden;" class="previews;" id="bgClicked;">
</div>
</center>
</body>
</html>
&#13;
答案 0 :(得分:0)
你错过了下面边缘的px,现在它是你想要的移动
.upfront{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-left: 155px;
margin-right: 23px;
}
.menu{
}
.spaceBoard{
position:relative;
}
.previews{
left:173px;
position:releative;
}
.button{
position:absolute;
margin-left:215px;
margin-top:315px;
z-index:2;
border-radius:50%;
border:none;
}
s
&#13;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body background="https://i.hizliresim.com/DyZ49m.png">
<script>
function bgClicked(){
var id = document.getElementById("bgClicked");
id.style.visibility="visible";
document.getElementById("bgMAIN").style.display="none";
}
</script>
<center>
<div class="upper"><img src="https://i.hizliresim.com/vJ9n5m.png" width="75%" height="75%"/></div>
<!--//<div><img src="Pics/2_.png" style="right:9px; top:12 position:relative;" /></div>-->
<div class="spaceBoard">
<input type="button" class="button" />
<img src="https://i.hizliresim.com/Eyo5pB.png" id="bgMAIN" onclick="bgClicked()">
<img src="https://i.hizliresim.com/mJB15Z.png" style="visibility:hidden;"class="previews;" id="bgClicked;">
</div>
</body>
</html>
&#13;