Javascript 让html按钮重叠到我的游戏中？_Javascript_Html_Css_Image_Button

Javascript 让html按钮重叠到我的游戏中？

javascript html css image button

Javascript 让html按钮重叠到我的游戏中？,javascript,html,css,image,button,Javascript,Html,Css,Image,Button,我有一个3D游戏，有一个3.js透视摄像头在3D空间中移动。现在，当您在这个3D空间中选择了一个项目时，我希望屏幕左上角出现一个按钮来取消选择该项目。有没有一种方法可以使用html实现这一点？因为现在我有一个按钮，但是它把游戏推到它下面，而不是作为它的一部分，这是html所期望的。我想我需要使按钮的背景透明，并手动将游戏推到屏幕顶部 <body style="background-color: #222222;"> //Here is the button that I n

我有一个3D游戏，有一个3.js透视摄像头在3D空间中移动。现在，当您在这个3D空间中选择了一个项目时，我希望屏幕左上角出现一个按钮来取消选择该项目。有没有一种方法可以使用html实现这一点？因为现在我有一个按钮，但是它把游戏推到它下面，而不是作为它的一部分，这是html所期望的。我想我需要使按钮的背景透明，并手动将游戏推到屏幕顶部

<body style="background-color: #222222;">

    //Here is the button that I need to be transparent
    //because I have no way to test it, I have no idea if that style code I have makes it transparent or not
    <input type="image" id="myimage" style="height:200px;width:200px;border:0 none;background-color: transparent;"  src="media/undo.png"/>

    <script src="src/game.js"></script>
    <script src="src/main.js"></script>

    //Here is where I load in the game
    <script>
    $(document).ready(function(){
        //All loading stuff
        THREE.ImageUtils.crossOrigin = '';
        var game = new Main($(document).width() - 10, $(document).height() - 20, "res/games.json");
        game.init();
        function gameUpdate(){
            game.update();
            window.requestAnimationFrame(gameUpdate, game.renderer.domElement);
        }
        gameUpdate();
    });
    </script>
    //Done with game loading script

</body>

以下是问题的图片：

我需要游戏和按钮在一起。有没有其他方法可以做到这一点，或者我应该在游戏中使用JS进行这项工作？

当然，你应该将按钮的背景设置为透明。然后你要做的是将按钮的位置设置为绝对位置。在CSS中，它看起来像这样

#myImage {
    position: absolute;
}

*如有必要，您可能希望更改图像的z索引。如果按钮显示在游戏屏幕后面，您可以这样做，在这种情况下，您很可能会将此添加到CSS中：

z指数：1

您是否尝试过向其添加position:absolute？并在必要时更改CSS中的z索引。图像的背景应该是透明的。这么简单，我不敢相信我通过搜索找不到它。谢谢