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，并添加位置：相对于容器div类。

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

1 个答案: