输入不可点击

Question

.contact-form {
transition: .3s;
margin-top: 120px;
/*border: 2px solid black;*/
background-color: rgb(243, 243, 243);
border-radius: 6px;
box-shadow: -4px 12px 11px 5px rgba(0, 0, 0, 0.521);
width: 475px;
height: 550px;
margin-left: 11px;
text-align: left;
align-items: center;
position: sticky;
left: 60%;
top: -20%;
user-select: all;
z-index: 4;
}
.benefit-card {
margin: 20px;
background-color: white;
text-align: center;
border: 1px solid black;
width: 300px;
height: 450px;
top: 0%;
left: 22%;
box-shadow: 2px 2px 12px 2px black;
user-select: none;
}
.benefit-card-header {
border-bottom: 3px dotted black;
padding-bottom: 11px;
}
.benefit-card-image {
-webkit-user-drag: none;
padding-top: 11px;
padding-bottom: 19px;
width: 200px;
filter: drop-shadow(2px 2px 6px black);
}
#help-me {
position: relative;
z-index: 8;
margin-top: -515px;
}

<div class="contact-form">
<h2 class="contact-form-header">Get Your Quote Today!</h2>
<form class="form-bg-pls-send-help">
<label class="contact-input-header" for="email">Email<span class="important-contact-field"> *</span></label>
<br>
<input class="contact-input" name="email" type="email" autocomplete="off" required placeholder="Your company email" />
<label class="contact-input-header" for="company">Company</label>
<br>
<input class="contact-input" name="company" type="text" required placeholder="Who do you work for?" />
<label class="contact-input-header" for="subject">Subject</label>
<input class="contact-input" name="subject" type="text" placeholder="Subject " />
<label class="contact-input-header" for="about">About</label>
<textarea class="long-input contact-input" name="about" type="text" placeholder="What does your company do?"></textarea>
<br><br>
<input class="getquote-button" type="submit" value="Get Quote" />
</form>
</div>
<div id="help-me">
<div class="benefit-card" id="bc">
<h1 class="benefit-card-header" id="bch">World Wide</h1>
<h3 class="benefit-card-description" id="bcd">No matter where you're from or where you're located we will help you grow your company!</h3>
</div>
</div>

我正在建立一个公司的样本网站。我有一个联系人表单设置，但输入是不可点击的，当他们在一个div标签，但我需要一个表单，所以我可以适当地样式的表单。表单应该需要输入，当我单击Get Quote按钮时，它允许我编辑第一个输入标记。我以前从来没有遇到过这种情况，我试过user-select，检查是否使用了disabled属性，以及我能想到的一切。

Answer 1

更新你的css文件到:

#help-me{
position: relative;
z-index: -1;
margin-top: -515px;
}

这个元素覆盖了整个屏幕。当您需要显示z-index时，请更新它。

Answer 2

你的输入是不可点击的，因为#help-me覆盖了所有的.contact-form，这是由于你使用margin-top的方式将其放置在比自然位置更高的位置。

考虑使用flexx来实现你的布局。

.layout {
display: flex
}
.contact-form {
flex: 1 1 auto;
background-color: rgb(243, 243, 243);
border-radius: 6px;
box-shadow: -4px 12px 11px 5px rgba(0, 0, 0, 0.521);
}
#help-me {
flex: 1 1 auto;
}

<div class="layout">
<div id="help-me">
#help-me
</div>
<div class="contact-form">
.contact-form
</div>
</div>