Question

我试图让导航游戏窗口显示在画布元素和其他所有内容之上，似乎它总是落后于这些。当我加载页面时，我可以在一瞬间看到它，然后消失，然后再也不会显示自己。

如何让它在顶部运行？我试过改变位置，但我尝试的都没有。

HTML：

enter()

CSS：

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <link href="https://fonts.googleapis.com/css?family=Ubuntu:500" rel="stylesheet" type="text/css">
    <link href="/resources/css/app.css?v={{ time() }}" rel="stylesheet" type="text/css">
    <link href="/resources/css/loading.css?v={{ time() }}" rel="stylesheet" type="text/css">
    <link href="/resources/css/design.css?v={{ time() }}" rel="stylesheet" type="text/css">
    <link href="https://unpkg.com/tippy.js@2.0.9/dist/tippy.css" rel="stylesheet" type="text/css">
</head>
<body>
    <script src="https://unpkg.com/tippy.js@2.0.9/dist/tippy.all.min.js"></script>

    <div id="loading-screen">
        <div id="loading-images">
            <img src="/resources/images/loading-screen/13__-6PX._-69w.png">
            <img class="last-loading-image" src="/resources/images/loading-screen/photo<?php echo rand(1, 29); ?>.png">
            <img src="/resources/images/loading-screen/12__-6PX._-NC.png">
        </div>
        <p id="loading-text"></p>
        <div id="loading-bar">
            <div class="loading-bar-center"></div>
        </div>
        <p class="loading-progress-text">&nbsp;&nbsp; 76%</p>
    </div>
    <div class="container">
        <div id="hotel-view">
            <div class="hotel-view-logo">
                <img src="/resources/images/hotel-view/reception_logo_drape.png">
            </div
            <div class="hotel-view-avatar">
                <img class="hotel-view-avatar" src="https://habboon.pw/habbo-imaging/avatarimage/figure?figure=sh-3338-93.ch-3334-93-92.lg-3337-92.hd-180-1.ha-3331-0.ca-1813-63&gesture=sml&size=m">
            </div>
        </div>
        <canvas id="game_canvas"></canvas>
        <div id="bottom-bar">
            <div class="bottom-bar-view-more-icon">
                <img src="/resources/images/bottom-bar/arrow.png">
            </div>
            <div class="bottom-bar-home-icon">
                <img src="/resources/images/bottom-bar/house.png">
            </div>
            <div class="bottom-bar-rooms-icon">
                <img src="/resources/images/bottom-bar/rooms.png">
            </div>
            <div class="bottom-bar-catalog-icon">
                <img src="/resources/images/bottom-bar/catalog.png">
            </div>
            <div class="bottom-bar-avatar">
                <img src="https://habboon.pw/habbo-imaging/avatarimage/figure?figure=sh-3338-93.ch-3334-93-92.lg-3337-92.hd-180-1.ha-3331-0.ca-1813-63&gesture=sml&size=m">
            </div>
            <div class="bottom-bar-seperator"></div>
        </div>
        <div id="game-windows">
            <div id="navigator-game-window">
                <h1>hello</h1>
            </div>
        </div>
    </div>

    <script>
        const authTicket = 'saichania123';
        const uniqueId = '{{ uniqid() }}';
        const figureCode = '';
    </script> 

    <script src="http://code.jquery.com/jquery-3.3.0.min.js?v={{ time() }}"></script>
    <script src="/resources/js/websockets.js?v={{ time() }}?v=<?php echo time(); ?>"></script>
    <script src="/resources/js/packet_events.js?v={{ time() }}?v=<?php echo time(); ?>"></script>
    <script src="/resources/js/packet_headers.js?v={{ time() }}?v=<?php echo time(); ?>"></script>
    <script src="/resources/js/packets.js?v={{ time() }}?v=<?php echo time(); ?>"></script>
    <script src="/resources/js/game.js?v={{ time() }}?v=<?php echo time(); ?>"></script>
    <script src="/resources/js/other.js?v={{ time() }}?v=<?php echo time(); ?>"></script>
</body>
</html>

Answer 1

使用position：absolute或position：fixed和top：0和left：0表示你的navigator-game-window id和class css。

希望这有效。我正在使用stackoverflow iOS应用程序，无法进行大量代码格式化：（

Answer 2

我不完全确定我理解你所要求的东西，因为我无法看到图像存在时的正常情况。但是，如果您希望＃navigator-game-window始终可见，那么您将需要使用

#navigator-game-window {
position: absolute;
top: 0;
left: 0;
}

将元素定位在具有相对定位的最近父div的左上角。除非您手动将另一个父级设置为position：relative;，否则，使用此代码将其设置为相对于

对齐

这是一个jsfiddle，您提供的代码通过必要的更改复制粘贴到其中：https://jsfiddle.net/aqm2ze04/4/

CSS：将div置于任何其他元素之上？

2 个答案: