I have a preloader which is loading in front of the `<body>` but not in front of the site `<navbar>` or the `{% block content %}`. `#preloader{z-index:999;}`

* Django 2.2.7
* Bootstrap 4.4.1
* JQuery 3.4.1

```js
$(window).on('load', function() {
  $('#preloader').addClass('loaded');
  setTimeout(function(){
    $('#preloader').addClass("notta");
}, 2000);
});
```

```css
#preloader:before {
  content: '';
  z-index: 999;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,1);
}
#preloader.loaded {
  opacity: 0;
  transition: .3s ease-in 1s;
}
#preloader.notta {
    display: none;
}
```

```html
<header>
<div class="flex-center" id="preloader">
    <div class="preloader-wrapper active">
        <div class="spinner-grow text-warning" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
</div>
</header>
```

If I put the preloader at the bottom of the `<body>` it will load on top of the `{% block content %}` but underneath the navbar. I assume this means it has to do with the order of loading?

How do I get it to show up *above* **everything** on the site?