Question

我有一个简短的问题。在我的网站https://www.metis-online.com上，如果您一直向下滚动页面，则会看到一个电子邮件营销搜索框。

我想要的是始终显示在固定在底部的屏幕上，以便无论用户向上还是向下滚动。营销搜索栏始终位于底部。

几乎就像我的顶部导航栏，但在屏幕底部。问题是，在导航栏上固定顶部很容易，因为它是<nav>元素的一部分，而营销搜索框则比较棘手，因为它不是`。

。

下面是此代码，如何设置？

/*--------Marketing Email-------*/

#marketing-email {
  padding: 1em;
  width: 100%;
  text-align: center;
  /*background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8));*/
  background-color: #5398ff;
  color: white;
  border: 1px solid #1034A6;
}

#market-email {
  padding: 0.5em;
  width: 30%;
}

.marketing-btn {
  background: #1034A6;
  color: white;
  padding: 0.5em;
  border: 1px solid #fff;
}

<section id="marketing-email">
  <form class="marketing-email-form" method="post" action="#mailing_list_email_sent">
    <div>
      <label for="email"><b>Stay updated on our new courses and services by joining our mailing list</b></label><br/>
      <input type="email" id="market-email" name="market-email" required placeholder="Email" />
      <button type="submit" class="marketing-btn">Send</button>
    </div>
  </form>
</section>

Answer 1

您尝试过使用position: fixed;吗？

#marketing-email {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}

滚动时如何在屏幕上将表单元素固定在屏幕底部？

1 个答案: