我不知道这是CSS问题还是JS问题…在我弄乱了代码之后，我无法对id Main部分做出反应。我有一个输入，但不能写任何东西。我不认为CSS是问题所在，因为我并没有在上面做什么重要的改变。我认为JS是一个问题，但找不到任何。
// function declaration
function checkChange(a) {
if (a == 0) {
main.style.marginLeft = "0%";
main.style.paddingTop = "20px";
} else if (a == 1) {
if (window.innerWidth <= 600) {
main.style.marginLeft = "0%";
main.style.paddingTop = "150px";
} else {
main.style.marginLeft = "25%";
main.style.paddingTop = "20px";
}
} else if (a == 2) {
if (window.innerWidth > 600) {
main.style.marginLeft = "25%";
main.style.paddingTop = "20px";
} else {
main.style.marginLeft = "0%";
main.style.paddingTop = "150px";
}
}
}
function resize() {
if (check == true) {
menuBar.style.width = "0%";
num = 0;
check = false;
} else {
if (window.innerWidth > 600) {
menuBar.style.width = "100%";
num = 1;
} else if (window.innerWidth <= 600) {
menuBar.style.width = "100%";
num = 2;
}
check = true;
}
checkChange(num);
};
// start of the program
const modal = document.getElementById("modal");
const menuBar = document.getElementById("Menu");
const main = document.getElementById("Main");
let check;
let num;
check = true;
// start of main
// User Interface Click and Changes
document.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
resize();
}
});
// check whether resize is detected
$(window).resize(function() {
checkChange(num);
});
//
// Check whether variable check is true or false
document.addEventListener("keyup", function(event) {
if (event.keyCode === 36) {
alert(check);
}
});
// end of main
// User Interface Alert
alert("Click Enter to close or open Menu Bar");
//end of the programbody {
margin: 0;
}
#Menu {
position: fixed;
display: block;
transition: 0.3s; /* Stay in place */
width: 100%;
height: 100%; /* Full height */
}
#modal {
height: 100%;
width: 25%;
padding-top: 60px;
overflow-x: hidden;
overflow-y: scroll;
border: 2px solid #3a3a3a;
z-index: 1;
background-color: #111;
color: #f1f1f1;
transition: 0.3s;
white-space: nowrap;
text-overflow: ellipsis;
}
#modal::-webkit-scrollbar {
display: none;
}
.cover {
transition: 0.5s;
padding: 4px 4px 4px 8px;
margin: 15px;
font-size: 3vw;
color: #818181;
border: 1px solid white;
}
.cover:hover {
background-color: #e4e4e4;
cursor: pointer;
}
#Main {
margin-left: 25%;
transition: .25s;
padding: 20px;
position: relative;
}
@media screen and (max-width: 600px) {
#modal {
padding-top: 15px;
width: 100%;
height: 120px;
}
#Main {
padding-top: 150px;
margin-left: 0%;
}
.cover {
font-size: 18px;
margin-bottom: 23px;
}
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media screen and (min-width: 601px) {
#Main {
margin-left: 25%;
padding-top: 20px;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Menu">
<div id="modal">
<div id="rpc" class="cover noselect">Rock-Scissor<br />-Paper</div>
<div class="cover noselect"></div>
<div class="cover noselect"></div>
<div class="cover noselect"></div>
</div>
</div>
<div id="Main">
<div><input type="text" /></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="module" src="control.js" defer></script>
<script type="module" src="RPC.js" defer></script>
<script src="hello.js" defer></script>
</body>
</html>没有position样式的<div id="Main" />集。这意味着，该div具有position的默认值，等于static。静态元素忽略任何位置特定属性(left, top, z-index)。Menu组件重叠Main组件，并且由于position: static,Main渲染在Menu下。要解决这个问题，只需添加任何position值，不包括static。我想relative会满足你所有的需求。
#Main {
margin-left: 25%;
transition: .25s;
padding: 20px;
position: relative;
}