html - 无法在 Div 中的 HTML 表单上输入文本

Question

我制作了一个单独运行良好的表单，但是一旦我将其放置在我的站点中，我就无法单击任何框来输入文本。我相信我已经将它缩小到我的导航栏(div 中的菜单)和我正在使用的另一个 div 之间的冲突，并且可能直到 719px - 但如果我错了请纠正我。我是新手，所以我不知道问题出在哪里或为什么会发生。在此先感谢您的帮助!

https://codepen.io/sshine2/pen/BREyBx

HTML:

 <div class="menu">
<ul>
    <li><a href="#">Social</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Skills</a></li>
  <li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

<div class="containers">
<h2>Get in Touch</h2>

 <form method="post" action="confirm.php">
 <label for ="name">Name: </label><span class="error">* required</span>
 <input type="text" name="name" required/><br /> 
 <label for ="email">E-Mail: </label><span class="error">* required</span>
 <input type="email" name="email" required/><br />
 <label for ="topic">Topic: </label><span class="error">* required</span>
 <input type="text" name="topic" required/><br />
 <label for ="question">Longest Time You've Spent in a Car: </label><span class="error">* required</span>
 <input type="text" name="question" required/><br />
  <label for ="thoughts">Thoughts for Shoshi: </label><span class="error">* required</span>
  <textarea name="message" rows="15" cols="100" required></textarea><br />
  <input type="submit" value="Share Your Thoughts" />
  </form>
</div>

CSS:

@media only screen and (min-width: 319px) {
h2 {
font-family: 'Special Elite', cursive;
    font-size: 1.7em;
font-weight: 500;
    text-align: center;
}

.containers {
background: rgba(255,255,255, 0.9);
padding: 15px;
margin: 0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-size: 1.5em;
} 
}

@media only screen and (min-width : 410px) {   
.menu {
font-size: 2.1em;
    margin-top: 1.9em;
}
.menu ul {
    margin-top: 28%;
}
}

@media only screen and (min-width : 768px) {     
.menu {
display: block!important;
position: fixed;
font-size: .9em;
width: 100%;
margin-top: -.3em;
background: rgba(255, 255, 255, 0);
}
}

Answer 1

感谢 TricksfortheWeb...

将z-index设为100，并添加position: relative to the container div class