[英]How to fix a z-index issue in Bootstrap?
我正在使用 Bootstrap 和我自己的代碼設計這個着陸點。 如您所見,主菜單並未顯示 HTML 上方的所有內容。 這是CSS 。
我該如何解決這個問題? 我認為這是一個 z-index 問題。 我對嗎?
這是原始菜單代碼。
謝謝
這是 css 菜單代碼的一部分:
/*----------ESTILOS MENU -----------*/.menuBtn { height: 30px; width: 30px; position: absolute; right: 20px; top: 10px; z-index: 101; }.menuBtn > span { background-color: var(--color-primario); height: var(--altura-linea); width: 100%; position: absolute; left: 50%; top: 50%; margin: -1px 0 0 -15px; transition: height 100ms; }.menuBtn > span:after, .menuBtn > span:before { content: ''; background-color: var(--color-primario); height: var(--altura-linea); width: 100%; position: absolute; left: 50%; margin-left: -15px; transition: all 200ms; }.menuBtn > span:after { top: -7px; }.menuBtn > span:before { bottom: -7px; }.menuBtn.act > span { height: 0; }.menuBtn.act > span:after, .menuBtn.act > span:before { background-color: #008877; top: 1px; }.menuBtn.act > span:after { transform: rotate(45deg); }.menuBtn.act > span:before { transform: rotate(-45deg); } /* main menu block */.mainMenu { background-color: var(--color-blanco); position: absolute; left: 0; top: 0; z-index: 100; height: 100%; width: 100%; display: table; text-align: center; opacity: 0; transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transform: scale(0); }.mainMenu.act { opacity: 1; transform: scale(1); }.mainMenu.act ul li { opacity: 1; transform: translateX(0); }.mainMenu ul { display: table-cell; vertical-align: middle; }.mainMenu li { padding: 8px 0; transition: all 400ms 510ms; opacity: 0; }.mainMenu li:nth-child(odd) { transform: translateX(30%); }.mainMenu li:nth-child(even) { transform: translateX(-30%); }.mainMenu li:last-child { transform: none; }.mainMenu a { color: #19b698; display: inline-block; font-size: 18px; }.mainMenu a.suBtn { color: var(--color-blanco); }.act{ background-color: red; }
請像這樣更新您的 css
/*----------ESTILOS MENU -----------*/
.menuBtn {
height: 30px;
width: 30px;
position: absolute;
right: 20px;
top: 10px;
z-index: 101;
}
.menuBtn > span {
background-color: var(--color-primario);
height: var(--altura-linea);
width: 100%;
position: absolute;
left: 50%;
top: 50%;
margin: -1px 0 0 -15px;
transition: height 100ms;
}
.menuBtn > span:after,
.menuBtn > span:before {
content: '';
background-color: var(--color-primario);
height: var(--altura-linea);
width: 100%;
position: absolute;
left: 50%;
margin-left: -15px;
transition: all 200ms;
}
.menuBtn > span:after {
top: -7px;
}
.menuBtn > span:before {
bottom: -7px;
}
.menuBtn.act > span {
height: 0;
}
.menuBtn.act > span:after,
.menuBtn.act > span:before {
background-color: #008877;
top: 1px;
}
.menuBtn.act > span:after {
transform: rotate(45deg);
}
.menuBtn.act > span:before {
transform: rotate(-45deg);
}
/* main menu block */
.mainMenu {
background-color: var(--color-blanco);
position: fixed;
left: 0;
top: 0;
z-index: 100;
height: 100%;
width: 100%;
display: table;
text-align: center;
opacity: 0;
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform: scale(0);
}
.mainMenu.act {
opacity: 1;
transform: scale(1);
}
.mainMenu.act ul li {
opacity: 1;
transform: translateX(0);
}
.mainMenu ul {
display: table-cell;
vertical-align: middle;
}
.mainMenu li {
padding: 8px 0;
transition: all 400ms 510ms;
opacity: 0;
}
.mainMenu li:nth-child(odd) {
transform: translateX(30%);
}
.mainMenu li:nth-child(even) {
transform: translateX(-30%);
}
.mainMenu li:last-child {
transform: none;
}
.mainMenu a {
color: #19b698;
display: inline-block;
font-size: 18px;
}
.mainMenu a.suBtn {
color: var(--color-blanco);
}
.act{
background-color: red;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.