jquery - 使井漂浮在 body 上，而不将元素插入体内

我有一口井可以漂浮在我其余的内容上。我遇到的问题是，当它加载页面时，它会将其余内容下推。我如何更改它，使其悬停在所有内容上，并且不会将页面上的内容加载到页面上。

这是页面加载的图像。


这是页面的图像，是向下滚动



请注意，它如何在第二张图像上浮动在内容上，但是在第一张图像上它将内容向下压。我应该更改什么，以便它在装载井时不会压低内容？

这是我的代码

<style>
    .well{
        margin-top: 20px;
        height: 300px;
        overflow-y:scroll;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }

    p#clients{
        margin-top: 10%;
    }

    #client-list{
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }

    .sticky {
        top: 0;
        position: fixed;
    }

    .menu {
        top: 0;
        position: -webkit-sticky;
        position: sticky;
        z-index: 1000;
        overflow-y: auto;
    }

    #client-chosen{
        height: 100px;
    }
</style>

@push('page-scripts')
<script>

    function getClients()
    {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: 'Get',
            url: '/all-clients',
            success: function (jsonStr) {
                $('.individual-client').remove();
                $('.clients-email').remove();
                var filtered_list = '';
                for (var i = 0; i < jsonStr.length; i++) {

                    filtered_list+= "<div style='margin-bottom:3%;text-transform: none; '><input type='radio' class='form-check-input individual-client' id=" + jsonStr[i].id + " name=" + jsonStr[i].id + " value=" + jsonStr[i].id + "><p style='display: inline' class='clients-email'>&nbsp;" + jsonStr[i].email+ "</p></div>"
                }
                $('.clients-list').html(filtered_list);
            },
            error: function (msg) {
                console.log("Did not get all clients:" + msg);
            }
        })
    }

    $(document).ready(function() {
        getClients();
        $('#close-choose-client').click(function () {
            $('#client-list').hide();
        })


        $(".clients-list").on( "click",'input' ,function() {
            $("input").prop('checked', false);
            $(this).prop('checked', true);
            var id = $(this).val()
            setCookie("client-id", id);
            var text = $(this).siblings('.clients-email').text();
            $('#chosen-client').text("You are working with " + text);
        });

        $('#filter-clients').keyup(function () {
            var email = $('#filter-clients').val();
            if(email.length > 0){
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    type: 'Get',
                    url: '/filter-clients',
                    data: {
                        email: email,
                    },
                    success: function (jsonStr) {
                        $('.individual-client').remove();
                        $('.clients-email').remove();
                        var filtered_list = '';
                        for (var i = 0; i < jsonStr.length; i++) {

                            filtered_list+= "<div style='margin-bottom:3%;text-transform: none;'><input type='radio' class='form-check-input individual-client' id=" + jsonStr[i].id + " name=" + jsonStr[i].id + " value=" + jsonStr[i].id + "><p style='display: inline' class='clients-email'>&nbsp; " + jsonStr[i].email+ "</p></div>"
                        }
                        $('.clients-list').append(filtered_list);
                    },
                    error: function (msg) {
                        console.log("Did not filter clients:" + msg);
                    }
                })
            }else{
                getClients();
            }
        })

    });
</script>
@endpush

    <div class="col-md-2 xs-hidden text-left menu">
        <div class="container-fluid">
            <div class="well row" id="client-list">
                <a class="fa fa-times pull-right" id="close-choose-client" style="color: black;"></a>
                <div class="form-group">
                    <label for="usr">Filter Clients By Email</label>
                    <input type="text" class="form-control" id="filter-clients">
                </div>
                <p id="clients">Or Choose A Client</p>
                <form action="">
                    <div class="form-check">
                        <label class="form-check-label clients-list">
                            <input type="radio" class="form-check-input individual-client">
                        </label>
                    </div>
                </form>
            </div>
            <div class="well row" id="client-chosen">
                <a class="fa fa-times pull-right" id="close-choosen-client" style="color: black;"></a>
                <div class="form-group">
                    <p id="chosen-client">You have not chosen a client</p>
                </div>
            </div>
        </div>
    </div>

最佳答案

尝试使用position: fixed代替sticky。这会将元素从流中删除，并且不会干扰页面的其余部分。