Select2 with AJAX appears behind modal

Question

I'm using Select2 in a modal but it isn't working quite right, as you can see here: https://gyazo.com/a1f4eb91c7d6d8a3730bfb3ca610cde6

The results appear behind the modal. How can I fix this? I've read simular posts but all talk about removing tabindex, something that I don't have in my code so I don't know how to fix it. Here's my code:

<div class="remodal shadow" data-remodal-id="keuze" data-remodal-options="closeOnOutsideClick: false">
    <button data-remodal-action="close" class="remodal-close"></button>
    <div class="panel-header">Kies uw type logboek</div>
    <div class="modal-body">
        <select id="select" class="searchselectstyle select2"></select>
        <button data-remodal-action="cancel" class="remodal-cancel mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect cancel">Cancel</button>
        <button data-remodal-action="confirm" class="remodal-confirm mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect send">Aanmaken</button>
    </div>
</div>

<script type="text/javascript">
    token = '{{csrf_token()}}';
    $(document).ready(function() {
        $('#select').select2({
            ajax: {
                type: "POST",
                url: "ajax/getlogtypes",
                dataType: 'json',
                data: function (params) {
                    return {
                        q: params.term, // search term
                        page: params.page,
                        '_token' : token
                    };
                },
                escapeMarkup: function (markup) {
                    return markup;
                }, // let our custom formatter work
                minimumInputLength: 1
            }
        });
    });
</script>

Answer 1

After inspecting the DOM as Rory McCrossan suggested, I figured that the generated span elements by Select2 appeared with a lower z-index. I fixed it by adding the following to my code:

.select2-container{
    z-index:100000;
}