Make splashscreen overlap elements-CodePudding

i am trying to make my splash screen overlap the website.

The splash screen gets pushed away by the elements that i want on the background.

www.rabbadz.com shows my splashscreen on the bottom.

here is my HTML

<!DOCTYPE html>

window.OneSignal = window.OneSignal || []; OneSignal.push(function() { OneSignal.init({ appId: "355bfb40-16e9-48aa-93c3-d9eb93775989", }); }); Rabbadz

    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600&amp;subset=latin-ext" rel="stylesheet">

    <!-- CSS -->
    <link href="assets/css/main.css" rel="stylesheet">

    <!-- JS -->
    <script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="assets/js/vendor/jquery-1.12.0.min.js"></script>

    <script src="assets/js/plugins/animate-headline.js"></script>
    <script src="assets/js/main.js"></script>


</head>
<body>
    
    <audio id="myAudio">
        <source src="assets/sound.mp3" type="audio/mpeg">
    </audio>
    
       <!--logo-->
    <img src="assets/images/logo.png" >

                        <!-- Options headline effects: .rotate | .slide | .zoom | .push | .clip -->
                           <div >

            <!--we are rabbadz-->
                                <div >
                                            <div >
                                                <h2 >
                                                    <div >
                                                        <div >WE ARE RABBITS</div>
                                                        <div >WE ARE BADASS</div>
                                                        <div >WE ARE RABBADZ</div>
                                                    </div>
                                                </h2>
                                                <div >Coming soon to the metaverse.</div>
            
                                                <!-- Options btn color: .btn-success | .btn-info | .btn-warning | .btn-danger | .btn-primary -->
                                                <div ><a href="https://mint.rabbadz.com" >MINT</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
            
    
      <!--Particles-->

    <div 
        id="particles-js"></div>
    
    <script src="assets/js/particles.js"></script>
    <script src="assets/js/app.js"></script> 

    <!-- splashscreen-->
    <div >
        <div >
            <div ></div>
        </div>

        <script type="text/javascript">
            function stars(){
                let count = 500;
                let scene = document.querySelector('.scene');
                let i = 0;
                while(i < count){
                    let star = document.createElement("i");
                    let x = Math.floor(Math.random() * window.innerWidth);
                    let y = Math.floor(Math.random() * window.innerHeight);

                    let duration = Math.random() * 10;
                    let size = Math.random() * 2;

                    star.style.left = x 'px';
                    star.style.top = y 'px';
                    star.style.width = 1 size 'px';
                    star.style.height = 1 size 'px';

                    star.style.animationDuration = 5 duration 's';
                    star.style.animationDelay = duration 's';
                    scene.appendChild(star);
                   
                    i  

                }
            }
            stars();


        </script>

    <!--Rabbadverse button-->

$(function() { var scene = $('.scene'), enterButton = scene.find('.knop'); setTimeout(function() { scene.removeClass('content-hidden'); }, 500); enterButton.on('click', function(e) { e.preventDefault(); scene.addClass('content-hidden').fadeOut(); });

                var anitext = $('.forest'),
                    enterButton = scene.find('.knop');

                    setTimeout(function() {
                    forest.removeClass('content-hidden');
                }, 500);

                enterButton.on('click', function(e) {
                    e.preventDefault();
                    forest.addClass('content-hidden').fadeOut();
                });
                
                
            });
            
            
            
        </script>

var x = document.getElementById("myAudio"); function playAudio() { x.play(); } function pauseAudio() { x.pause(); }

</body>

CodePudding user response：

If I understand it right, you want your "scene" div above the black background div.

You could achieve this by this simple css:

.scene {
  position: fixed; /* make it relative to the viewport */
  inset: 0; /* make the div close to the edge of the relative element, here the viewport, so it takes the full screen */
}