I'm not so good at css, and since i use tools like radzen, i have some pre-made styles

i made a top bar as followed, and the drop menu is hidden behind radzen grid headers. what do i need to do so it's priority ? I changed the z-index and it doesn't do anything.

I also would like to push the log out button, only that one, to the right [1]: .png

<ul>
                    <AuthorizeView Context="PageRights" Roles="Administrator">
            <Authorized>


    <li><a href="">Site client</a></li>
    <li><a href="Schedule">Horaire</a></li>
    <li><a href="Customers">Clients</a></li>
    <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Activités</a>
        <div class="dropdown-content">
            <a href="ActivityRequests">Activités</a>
            <a href="ActivityRequestCustomers">Demandes clients</a>
        </div>
    </li>
    <li><a href="ManualBilling">Ventes manuelles</a></li>

    <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Facturation</a>
        <div class="dropdown-content">
            <a href="Quotes">Soumissions</a>
            <a href="Payments">Paiements</a>
            <a href="PaidTaxes">Taxes perçues</a>
        </div>
    </li>  
    <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Animaux</a>
        <div class="dropdown-content">
            <a href="Species">Animals</a>
            <a href="ACIAInfos">Informations ACIA</a>
        </div>
    </li>
    <li><a href="Utilities">Utilitaires</a></li>
    <li><a href="Account/Manage">Compte</a></li>
    <li>
    <form action="Account/Logout" method="post">
        <AntiferyToken />
        <input type="hidden" name="ReturnUrl" value="" />
                <button type="submit" class="btn" style="background: transparent;border: none !important;color: white; height:53px">
            Déconnexion
        </button>

                </form>
            </li>
            </Authorized>
            <NotAuthorized>
            <li><a href="Account/Login">Connexion</a></li>

            </NotAuthorized>
        </AuthorizeView>

</ul>


 ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;}

li {
float: left;}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

    li a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }

li.dropdown {
    display: inline-block;
}

.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
overflow: visible;}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }

.dropdown:hover .dropdown-content {
display: block;}

I'm not so good at css, and since i use tools like radzen, i have some pre-made styles

i made a top bar as followed, and the drop menu is hidden behind radzen grid headers. what do i need to do so it's priority ? I changed the z-index and it doesn't do anything.

I also would like to push the log out button, only that one, to the right [1]: https://i.sstatic/3KdIOC4l.png

<ul>
                    <AuthorizeView Context="PageRights" Roles="Administrator">
            <Authorized>


    <li><a href="">Site client</a></li>
    <li><a href="Schedule">Horaire</a></li>
    <li><a href="Customers">Clients</a></li>
    <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Activités</a>
        <div class="dropdown-content">
            <a href="ActivityRequests">Activités</a>
            <a href="ActivityRequestCustomers">Demandes clients</a>
        </div>
    </li>
    <li><a href="ManualBilling">Ventes manuelles</a></li>

    <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Facturation</a>
        <div class="dropdown-content">
            <a href="Quotes">Soumissions</a>
            <a href="Payments">Paiements</a>
            <a href="PaidTaxes">Taxes perçues</a>
        </div>
    </li>  
    <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Animaux</a>
        <div class="dropdown-content">
            <a href="Species">Animals</a>
            <a href="ACIAInfos">Informations ACIA</a>
        </div>
    </li>
    <li><a href="Utilities">Utilitaires</a></li>
    <li><a href="Account/Manage">Compte</a></li>
    <li>
    <form action="Account/Logout" method="post">
        <AntiferyToken />
        <input type="hidden" name="ReturnUrl" value="" />
                <button type="submit" class="btn" style="background: transparent;border: none !important;color: white; height:53px">
            Déconnexion
        </button>

                </form>
            </li>
            </Authorized>
            <NotAuthorized>
            <li><a href="Account/Login">Connexion</a></li>

            </NotAuthorized>
        </AuthorizeView>

</ul>


 ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;}

li {
float: left;}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

    li a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }

li.dropdown {
    display: inline-block;
}

.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
overflow: visible;}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }

.dropdown:hover .dropdown-content {
display: block;}

• css

1 Answer 1

Adjusting the z-index will work but there is a caveat. It requires an understanding of how the z-index layering works.

Let's say I have this example HTML markup:

    <div class="first-layer">
        <div class="second-layer">
            <div class="third-layer"></div>
        </div>
        <div class="second-layer">
            <div class="third-layer"></div>
        </div>
    </div>
    <div class="first-layer">
        <div class="second-layer">
            <div class="third-layer"></div>
        </div>
        <div class="second-layer">
            <div class="third-layer"></div>
        </div>
    </div>

By default the second first layer div will automatically have a higher z-index than the first one. This means that if they both have position: absolute applied, the second first layer div - and all it's descendents - will have a higher z-index.

One important thing to know is that the z-index for the descendents of any div will not go above the parent or sibling of the parents z-index.

So let's say we apply the following CSS

.first-layer:nth-child(1) {
    position: absolute;
    z-index: 1;
}
.first-layer:nth-child(1) .second-layer {
    position: absolute;
    z-index: 1000;
}
.first-layer:nth-child(2) {
    position: absolute;
    z-index: 2;
}
.first-layer:nth-child(2) .second-layer {
    position: absolute;
    z-index: 1;
}

You might think that .first-layer:nth-child(1) .second-layer will have the highest z-index because we added z-index: 1000 to this element.

In reality though, .first-layer:nth-child(2) .second-layer will still have a higher z-index because its parent .first-layer:nth-child(2) has a higher z-index than .first-layer:nth-child(1) which is the parent of .first-layer:nth-child(1) .second-layer

To fix the issue in the example and make sure that .first-layer:nth-child(2) .second-layer has a higher z-index. We need to adjust the z-index of .first-layer:nth-child(1) and make sure it is higher than .first-layer:nth-child(2).

Afterwards, depending on how much spagetti is in the codebase, it may be necessary to look at each descendent of each parent and compare z-indexes for descendents of the same layer.

To fix your issue what you need to do is to search the DOM and find the parent of the div that is overlapping your element. Let's call this parent element parent2.

Once you find parent2 then identify the sibling element that is the ancestor of the div that is your dropdown menu. We will call this parent1. Set the z-index of parent1 (and potentially all descendents of parent1) to a higher z-index of parent2 (and potentially all its descendents).

I hope this helps.