在Firefox中无法点击的文本区域内输入“提交”

Question

我有一个简单的表格，允许用户将邮件发送给网站的所有者。 我不想完全更改它，因为我已经为此编写了PHP脚本，并且在尝试向其中添加一些样式之前，此解决方案效果很好...

问题是，textarea内部的“Wyślij>”（提交）仅在Firefox中不起作用。 我无法单击它，就像按钮在下面一样。 在Opera，Chrome，Edge，IE中-可以正常工作。 我开始放弃这个。 我将不胜感激，不知道是什么原因引起的。

JSFiddle： http : //jsfiddle.net/c0vz64m1/

HTML代码：

<form method="post" action="kontakt.php" id="contactform" style="margin-left:35vw; margin-top:20px;">
            <label for="name">Imię<font color="white">*</font>:</label><br>
            <input type="text" name="name" id="name" placeholder=" Twoje imię (wymagane)" required /><br>

            <label for="email">Email<font color="white">*</font>:</label><br>
            <input type="text" name="email" id="email" placeholder=" Twój email (wymagane)" required />

            <div id="text-area">
            <label for="message">Wiadomość<font color="white">*</font>:</label><br>
            <textarea name="message" rows="9" cols="50" id="message" placeholder=" Twoja wiadomość (wymagane)" equired></textarea>


            <input type="submit" name="submit" value="Wyślij &raquo;" class="submit-button"/></div>
        </form>

CSS：

    input#name,input#email {
    box-shadow:0px 0px 10px skyblue;
    border:2px solid skyblue;
    border-radius:7px;
    padding-left:5px;
    transition:all .2s ease-in-out;
}

input#name:focus,input#email:focus {
    box-shadow:0px 0px 20px skyblue;
    transition:all .2s ease-in-out;
}

input#name:hover,input#email:hover {
    box-shadow:0px 0px 20px skyblue;
}

.submit-button {
    width:75px;
    height:36px;
    margin-left:380px;
    display:block;
    margin-top:-41px;
    border-top:2px solid blue;
    z-index:5000;
    font-size:14pt;
    color:skyblue;
    font-family:Andada;
}

textarea {
    box-shadow:0px 0px 10px skyblue;
    border:2px solid skyblue;
    border-radius:10px;
    resize:none;
    height:150px;
    width:375px;
    z-index:1;
    padding-right:75px;
    transition:all .2s ease-in-out;
}

textarea:focus {
    box-shadow:0px 0px 20px skyblue;
    transition:all .2s ease-in-out;
}

textarea:hover {
    box-shadow:0px 0px 20px skyblue;
}

Answer 1

使用绝对定位将按钮放在文本区域上，它将起作用。

从类.submit-button删除以下内容：

margin-left:380px;
margin-top:-41px;

并添加以下内容：

position:absolute;
right: 0;
bottom: 30px;

然后添加position:relative对于#text-area position:relative

Answer 2

请参阅更新的小提琴： http : //jsfiddle.net/w86o8hhh/ ，其中添加了：

  z-index:10;

到CSS，以及：

  id="submit"

到提交按钮