我的页脚移动了，我不确定该怎么做

Question

正在尝试创建联系我们页面；就在我在联系表格上进展顺利时，页脚决定移到中间：

我不知道如何解决这个问题。

.Contact-box {
  Width: 500px;
  Background-colour: #fff;
  Top: 50%;
  Left: 50%;
  Transform: translate(-50%, -50%);
  Position: absolute;
}

h1 {
  Margin-bottom: 1rem;
  Color: red;
  Text-align: center;
}

form {
  Display: flex;
  Flex-direction: column;
  Width: 24rem;
  Gap: 1rem;
  Margin: 35px;
}

Input,
Select,
Subject,
textarea {
  Padding: 1.5rem;
  Background: transparent;
  Border: 2px solid white;
  Border-radius: 15px;
  Width: 400px;
}

textarea {
  Height: 7rem;
}

Button {
  Width: 8rem;
  Padding: 1rem;
  Cursor: pointer;
  Background: blue;
  Color: black;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="logo">
  <a href="#"><img src="logo.jpg" width="95" /></a>
</div>
<div class="coolname">
  <a href="#"><img src="coolname.jpg" width="105" /></a>
</div>
<nav>
  <ul>
    <li class="current-page"><a href="home.html">Home</a></li>
    <li><a href="AboutUs.html">About Us</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="Consultation & Quotes.html">Consultation & Quotes</a></li>
    <li><a href="ContactUs.html">Contact&nbsp;Us</a></li>
    <li><a href="clientreferrals.html" target="_blank">Client Referrals</a></li>
    <li><a href="blog.html" target="_blank">Blog</a></li>
  </ul>
</nav>
<br><br>
<h1>Contact Us!</h1>
<div class="Contact-box">
  <br><br>
  <form>
    <input type="text" name="Name" placeholder="First and Last Name" required>
    <input type="text" name="Email" placeholder="example@email.com" required>
    <input type="text" name="Subject" placeholder="Subject Line" required>
    <textarea name="Message" placeholder="Message" required></textarea>
    <br><br>
    <button type="submit">Send</button>
    <br><br>
  </form>
</div>
<footer>
  <div class="bottom-content">
    <h3>Geek Yourself Out</h3>
    <p>To get some behind-the-scenes action to staying updated on the latest projects, check out these social media links! All follows, likes, comments, and shares are appreciated. </p>
    <div class="socials">
      <li>
        <a href="https://www.facebook.com/Geekyourselfout/"><img src="facebook-box-fill.png" alt="Facebook" </a></li>
      <li>
        <a href="https://www.instagram.com/geekyourselfout/"><img src="instagram-fill.png" alt="Instagram" </a></li>
    </div>
  </div>
  <div class="bottom-page">
    <p>copyright &copy;2022 Geek Yourself Out. Designed by Kim</p>
  </div>
</footer>

Answer 1

以下样式将解决您的问题。

.Contact-box {
    position: static;
    transform: none;
}

我的页脚移动了，我不确定该怎么做

My footer moved and I'm unsure what to do

html

css

footer