i have problem like this dropdown-menu covered

btw it isn't covered by other div, but dropdown-menu can't be out of the navbar, if i can ilustrate this it can be like this

ilustration of the navbar and dropdown-men

i make the navbar native with this code

        <div id="topnav" >
            <div >
                <a href="#" onclick="sidebarToggle()">
                    <i ></i>
                </a>
                <p  style="text-align: left; font: normal normal normal 14px/17px Helvetica; letter-spacing: 0.34px;"><%: DateTime.Now.ToString("dddd, dd MMMM yyyy") %></p>
            </div>


            <div  style="max-width: 350px;">
                <div >
                    <img  src="<%=Page.ResolveClientUrl("~/Assets/img/Worklist/atom-button-header-a-button-header-icon.svg")%>" alt="Alternate Text" />

                </div>
                <div >
                    <img style="height: 24px;"  src="<%=Page.ResolveClientUrl("~/Assets/img/Worklist/atom-icon-a-icon-globe.svg")%>" alt="Alternate Text" />
                </div>
                <div >
                    <div id="en" >EN</div>
                </div>
                <div  style="max-width: 250px;">
                    <div id="profile"  style="max-width: 250px; width: 150px;">
                        <div >
                            <div style="cursor: pointer;" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div >
                                    <img style="height: 32px; width: 32px;" src="<%= Page.ResolveClientUrl("~/Assets/img/Worklist/img_avatar.png") %>"  alt="Responsive image" />
                                </div>
                                <div >
                                    Nama User
                                </div>
                                <div >
                                    <img src="<%= Page.ResolveClientUrl("~/Assets/img/Worklist/atom-icon-a-icon-angle-down.svg") %>" alt="Text" />
                                </div>
                            </div>
                            <div  aria-labelledby="dropdownMenuButton" style="opacity: 1 !important; z-index: 99;">
                                <a  href="#">Logout</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

and the css of is like this

.topnav {
    top: 0;
    overflow: hidden;
    height: 56px;
    background: #1D2567 0% 0% no-repeat padding-box;
    opacity: 1;
    display: flex;
}

.close-sidebar {
    margin-left: 56px;
}

for the dropdown-menu i used boostrap 4.3.1

when i inspect the web, the css is like this

css inspect 1

css inspect 2

css inspect 3

css inspect 4

Update:

i try to see my z-index using 3d view in ms edge, and the dropdown-menu is already in front of the navbar, but on the website it is covered

3D View

CodePudding user response：

set position relative to parent or container and set position absolute to child elements. try to change overflow

    .topnav {
top: 0;
overflow: hidden; // try to change this not hidden
height: 56px;
background: #1D2567 0% 0% no-repeat padding-box;
opacity: 1;
display: flex;
position: relative; // parent}

.close-sidebar {
margin-left: 56px;
position: absolute; // child};

if dont work let us to know and type more describe. thank you

CodePudding user response：

You can try

.topnav {
    top: 0;
    overflow: hidden;
    height: 56px;
    background: #1D2567 0% 0% no-repeat padding-box;
    opacity: 1;
    display: flex;
    position: relative;
}

.close-sidebar {
    margin-left: 56px;
    position: absolute;
    z-index: 10;
}

This should work. Let us know if this doesn't

CodePudding user response：

Try using this

.topnav {
    top: 0;
    overflow: hidden;
    height: 56px;
    background: #1D2567 0% 0% no-repeat padding-box;
    opacity: 1;
    display: flex;
    z-index: 999;
}

.close-sidebar {
    margin-left: 56px;
}