How to overlay elements with CSS? - html

Question

I'm trying to make a navigation menu with tabs and I use negative margin to group the elements and I want the active element to stay over the inactive elements. I used position: absolute but it had no effect. How can I do this?
.nav-item {
margin: -40px;
}
.nav-link {
color: #F2BF5E !important;
font-weight: 700 !important;
}
.nav-link.active {
color: white !important;
font-weight: 700 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<div style="margin-top: 10%" class="row">
<div class="col">
<ul style="display: flex; justify-content: center;" class="nav nav-pills nav-pills-warning" role="tablist">
<li (click)="teste('entrar')" class="nav-item" style="width: 200px;">
<a class="nav-link active" data-toggle="tab" href="#link1" role="tablist">
Entrar
</a>
</li>
<li (click)="teste('cadastrar')" class="nav-item" style="width: 200px;">
<a data-toggle="tab" class="nav-link" href="#link2" role="tablist">
Cadastrar
</a>
</li>
</ul>
</div>
</div>
Currently, this is what I have:
enter image description here

Answer 1

If I am understanding you correctly, you want an image to be on top of the other, and vice versa, based off of whether it is 'active' or not.
In this case, I would imagine using the z-index is what you would want. It is a CSS property that provides depth/stacking based off of an integer value.
.nav-link.active {
z-index:1;
position:absolute;
color: white !important;
font-weight: 700 !important;
}
You might have to modify your code a bit to get it to how you want exactly; I'm just trying to provide a concept. You can just toggle the z-index value based off of whether it is 'active'