I’m working on a project that has a search btn which opens a modal in the header but when i add position: fixed; top:0; to header modal becomes unreachable.

this is the html:

    <header class="bg-danger w-100">
        <button type="button" class="mx-2 me-md-5 ms-md-3" data-bs-toggle="modal"
            data-bs-target="#search_modal" id="search_btn">جستجو</button>

        <div class="modal fade " id="search_modal">
            <div class="modal-dialog modal-dialog-centered ">
                <div class="modal-content ">
                    <div class="modal-header">
                        <h4 class="">برای جستجو تایپ کنید:</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form class="d-flex" role="search">
                            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                            <button class="btn btn-outline-success" type="submit">Search</button>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </header>