Toast problem

Created by: lcsqlpete

Using OSX 10.13.6, Chrome 71.0.3578.98 and Bootstrap 4.2.1.

Copied the code for showing a toast from the documentation along with a button to show it. I thought toasts normally displayed on top of other page elements but in my case, the toast displays below (further down the page than) the button

Here's the code.

<button type="button" class="btn" onClick="$('.toast').toast('show')">Show</button>
        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
            <div class="toast-header">
                <strong class="mr-auto">Toast heading</strong>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body text-success">
                <p>Toast body</p>
            </div>
        </div>

I'm bringing in Bootstrap with:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Thanks in advance for any guidance.