我正在处理一个正在处理的项目的问题,我在容器内部按住按钮,每当我尝试在css中移动它们时,按钮将消失,并设置容器css的顶部或右侧相对值将移动整个网站,我想要实现的是在右侧排列所有按钮,我已经包含了一小部分代码,这是我当前的工作,以及到该网站的链接,所以你可以看到结果。
我相信问题可能与画布的大小有关,但是增加画布的大小会拉伸所有图像以适应它,而我仍然无法使用css移动它们。感谢您提供的任何帮助。
HTML:
<div id="container">
<div id="webgl"></div>
<input type="image" id="intro" src="images/icon-intro.png"/>
<input type="image" id="avatar" src="images/icon-avatar.png"/>
<input type="image" id="news" src="images/icon-news.png"/>
<input type="image" id="play" src="images/icon-play.png"/>
<input type="image" id="stop" src="images/icon-stop.png"/>
</div>
CSS:
#container {
width: 100px;
height: 100px;
position: relative;
}
#intro,
#intro {
width: 10%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#intro {
z-index: 10;
}
指向存在问题的网站的链接:
http://playground.eca.ed.ac.uk/~s1572393/
再次感谢您的帮助或解释。
答案 0 :(得分:0)
在问题评论中追随追索后,我能够解决问题。
我删除了容器,并将输入元素的css重构为以下内容:
#intro {
position: absolute;
right: 30px;
top: 30px;
z-index: 10;
}