I work on Angular and I have two different html files from two DIFFERENT COMPONENTS and I call the code of the first html file using the selector. In the first html I have a dropdown menu but it gets covered by the div of the second html file.
HTML of the FIRST file
<div class="dropdown">
<button class="dropbtn"> login
</button>
<div class="dropdown-content dropdown-menu-center">
<a href="#">login as user </a>
<a href="#">login as admin </a>
</div>
</div>
CSS of the FIRST file
.dropbtn {
color: black;
padding: 16px;
font-size: 16px;
position: relative;
border: none;
margin-right: 100px;
background: rgba(246, 246, 246, 0);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-menu-center {
left: 28% !important;
right: auto !important;
text-align: center !important;
transform: translate(-50%, 0) !important;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f6f6f6;
min-width: 170px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: 55px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
HTML of the SECOND file (calling the first file with the selector app-first-file>
<app-first-file></app-first-file>
<div class="rectangle">
hello world
</div>
CSS of the SECOND file
.rectangle {
width: 1200px;
position: relative;
background: rgba(255, 255, 255);
margin-right: 80px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
z-index: -1;
}
I used z-index both in dropdown-content in file1 and rectangle in file2 but it doesn't work
NB: I can't mix them in the same file/component due to work requirements.
I think 1st CSS file . You should try "z-index" attribute in class:
dropdown
Or both class:
dropdown-content
dropdown-menu-center
.dropdown-content.dropdown-menu-center{
z-index:1;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.