modal show in transparent body

Question

Dropdown in parent view is visible even when boostrap modal is presented above it. Please let me know if there is any way by which this can be solved. Please let me know if there is any way by which this can be solved. Below is the image for refenece.

create in bootstrap modal and

below is my bootstrap modal code:

 <div class="modal" id="AuthorModel" role="dialog">
        <div class="modal-dialog mainModal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Author List</h4>
                </div>
                <div class="modal-body divauthor" id="divauthor">

                    <div class="divSearch authorsearch">
                        <div class="SearchBox">
                            <input type="text" onkeyup="AuthorSearch()" id="btnsearchtxt" name="srch-term" placeholder="Search" autofocus/>
                        </div>
                        <div class="SearchAction">
                            <div class="SearchActionAlign">
                                <a href="#" onclick="clearSearchResultOfAuthor()" class="NonAction ActionClick">
                                    <img src="../../assets/images/icons/close.png" alt="Cancel" class="ImgClose" />
                                </a>
                                <a href="#" class="NonAction ActionClick" id="btnsearchtxt">
                                    <img src="../../assets/images/icons/search.jpg" alt="Search" class="ImgSearch" />
                                </a>
                            </div>
                        </div>
                    </div>

                    <div id="divauthorlist" class="divauthorlist" data-dismiss="modal"></div>

                </div>

            </div>

        </div>

    </div>

below is my css code:

   #AuthorModel .divauthorlist {
        cursor: pointer;
        max-height: 400px;
        overflow: auto;
        padding: 5px;
    }
    #AuthorModel .mainModal .modal-content{
        background-color: white!important;
    }
    #AuthorModel .modal-content .modal-body {
        padding: 15px 1px 15px 15px!important;
    }

    #AuthorModel .modal-header .close {
        padding-right: 10px;
        color: white;
    }

    #AuthorModel .modal-header {
        background: var(--blue);
        color: #FFF;
        padding: 2px;
        height: 30px;
        font-size: 12pt;
        padding-left: 12px;
        display: inline-block;
        width: 100%;
        border-bottom: 0px;
    }

    #AuthorModel .authorsearch {
        margin-top: 0%;
        margin-bottom: 2%;
    }

    #AuthorModel #btnsearchtxt {
        width: 100%;
        border: 0 none;
        padding: 0px 0px 1px 6px;
        height: 28px;
        color: #000;
    }

Answer 1

Add z-index property a higher value to the class that affects the element that's not correctly showing. Check its definition (and examples) here: All About.... Z-Index?

Cannot simulate your code, please add a fiddle so I can try it live.