I am facing a challenge with the project I am currently working on. I have a group of buttons inside a container, and every time I attempt to adjust their position using CSS, the buttons end up disappearing. Additionally, setting a relative top or right value in the container's CSS causes the entire website to move. My goal is to align all the buttons along the right side. Below is a snippet of my current code and a link to the site for reference.
It seems like the issue could be related to the canvas size. However, increasing the canvas size distorts the images without allowing me to reposition them using CSS. Any assistance you can provide would be greatly appreciated.
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;
}
Here is the link to the site where the issue occurs:
Thank you for any guidance or insights you may have.