Javascript 一个部分与第二个部分重叠

我在左栏中创建了两个部分。一个是联系人表单，另一个是页脚。为什么页脚（红方块）在联系人表单上重叠

HTML代码：

<div class="hero-wrapper">
        <div class="hero-wrapper-left-column">
            <div class="contact-form-wrapper">
                <form id="wf-form-contact-form" name="wf-form-contact-form" class="contact-v1-form">
                    <h1 class="contact-v1-heading">work with scotty</h1>
                    <p class="contact-v1-text">I help people go after their dreams and desires every day. The only difference between you and them? The action we take together. Reach out and I will get back to you ASAP my friend.</p>
                    <input type="text" class="input" maxlength="256" name="contact-name" placeholder="Your name" id="contact-name">
                    <input type="email" class="input" maxlength="256" name="contact-email" placeholder="Email Address" id="contact-email">
                    <input type="text" class="input" max_length="25" name="contact-phone" placeholder="Phone" id="contact-phone">
                    <select name="" id="select" class="w-select">
                        <option value>Select one...</option>
                        <option value="first">Mentorship</option>
                        <option value="second">Interview</option>
                        <option value="third">Speaking Engagement</option>
                    </select>
                    <textarea id="contact-message" class="input" maxlength="5000" placeholder="Describe your work" name=""></textarea>
                    <input type="submit" value="Send Message" class="contact-button">
                </form>
            </div>
            <div class="footer-wrapper">
                
            </div>
        </div>
        <div class="hero-wrapper-right-column"></div>
        </div>
</div>

---

由于这段代码，footer和contact类彼此重叠

.hero-wrapper-left-column .contact-form-wrapper {
    width: 85%;
    height: 80%;
    margin: auto;
    position: absolute; <===== Here
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; <===== To Here
 }

如果您想了解有关position CSS属性的更多信息，请阅读：

.hero-wrapper-left-column .contact-form-wrapper {
    width: 85%;
    height: 80%;
    margin: auto;
    position: absolute; <===== Here
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; <===== To Here
 }

.hero-wrapper-left-column .contact-form-wrapper {
    width: 85%;
    height: 80%;
    margin: auto;
 }