[英]Angular/html : How do you apply z-index between two divs from different files/components?
我在 Angular 上工作,我有來自兩個不同組件的兩個不同 html 文件,我使用選擇器調用第一個 html 文件的代碼。 在第一個 html 中,我有一個下拉菜單,但它被第二個 html 文件的 div 覆蓋。
第一個文件的 HTML
<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>
FIRST 文件的 CSS
.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;
}
SECOND文件的HTML(調用第一個文件,選擇器app-first-file>
<app-first-file></app-first-file>
<div class="rectangle">
hello world
</div>
SECOND文件的CSS
.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;
}
我在 file1 的下拉內容和 file2 的矩形中都使用了 z-index,但它不起作用
注意:由於工作需要,我不能將它們混合在同一個文件/組件中。
我認為第一個 CSS 文件。 您應該嘗試 class 中的“z-index”屬性:
dropdown
或者兩者都是 class:
dropdown-content
dropdown-menu-center
.dropdown-content.dropdown-menu-center{
z-index:1;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.