我正在使用 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;
}uj5u.com熱心網友回復：
請像這樣更新您的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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/416962.html
標籤：