html - 在上面定位文本区域标签(有或没有表格)

Question

我试图将我的两个标签(“您的消息:”和“您的电子邮件:”)放置在每个文本区域的左上角，“您的消息:”在顶部文本区域。虽然即使通过这种方法:How will I align the label of a text area to top?我无法让它工作。它是否需要该表才能正常工作？我已经尝试过其他方法来让它发挥作用，例如将表单分组在 -p- 标记内，但这也没有用。

HTML

<div id="ContactUsForm">
    <p>Contact Us</p>
        <form>
            <table>
            <td>
            <label for="message">your message:</label>
            <textarea id="message" class="contact" name="message"</textarea>
            <label for="email">your email:</label>
            <textarea id="email" class="contact" name="email"></textarea>
            </td>
            </table>
        </form>
</div>

CSS

#ContactUsForm {
    position: absolute;
    width: 1400px;
    height: 400px;
    top: 227px;
    left: 42px;
    border: 2px solid #E64A19;
}

#ContactUsForm p {
    text-decoration: underline;
    font-weight: bold;
    position: absolute;
    top: -15px;
    left: 50px;
    font-size: 30px;
}

.contact {
    position: absolute;
    background: white;
    border: 2px solid #E64A19;
}

#message {
    width: 500px;
    height: 150px;
    top: 100px;
    left: 30px;
    resize: none;
    position: absolute;
}

#email {
    width: 500px;
    height: 70px;
    position: absolute;
    resize: none;
    top: 300px;
    left: 30px;
}

label {
    vertical-align: top;
}

Answer 1

去掉 position: absolute，在这种情况下，我看不出在表格中使用它有什么意义。

<div id="ContactUsForm">
    <p>Contact Us</p>
        <form>
            <table>
            <tr>
            <td>
            <label for="message">your message:</label>
            <textarea id="message" class="contact" name="message"></textarea>
            <label for="email">your email:</label>
            <textarea id="email" class="contact" name="email"></textarea>
            </td>
            </tr>
            </table>
        </form>
</div>

    #ContactUsForm {
    width: 1400px;
    height: 400px;
    border: 2px solid #E64A19;
}

#ContactUsForm p {
    text-decoration: underline;
    font-weight: bold;
    font-size: 30px;
}

.contact {
    background: white;
    border: 2px solid #E64A19;
}

#message {
    width: 500px;
    height: 150px;
    top: 100px;
    left: 30px;
    resize: none;
    display: block;
}

#email {
    width: 500px;
    height: 70px;
    display: block;
    resize: none;
    top: 300px;
    left: 30px;
}

label {
    vertical-align: top;
}

这是 JSFiddle:https://jsfiddle.net/pa4r62eu/