無法在Div中輸入HTML表單中的文本

我做了一個表單，它自己可以正常工作，但是一旦將它放置在我的網站中，我就無法點擊任何一個框來輸入文本。我相信我已經縮小到我的導航欄（一個div中的菜單）與另一個我使用的div之間的衝突，並且可能直到719px - 但是如果我錯了，請糾正我。我很新鮮，所以我不確切地知道問題出在哪裏或爲什麼發生。先謝謝您的幫助！無法在Div中輸入HTML表單中的文本

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); 
} 
}

來源

2017-05-26 SShine2

更改表單的['z-index']（https://developer.mozilla.org/en-US/docs/Web/CSS/z-index?v=control）。 – TricksfortheWeb

並添加一個'position：relative' – TricksfortheWeb

https://codepen.io/tricksfortheweb/pen/JNVoYK – TricksfortheWeb

由於TricksfortheWeb ...

取得了Z-IND例如：100，並添加位置：相對於容器div類。

來源

2017-05-26 01:18:39 SShine2

無法在Div中輸入HTML表單中的文本

回答

相關問題