我想让一个元素悬垂到它上面的元素中

Question

我无法弄清楚这一点，我尝试将元素置于绝对位置并将其放置在我想要的位置，但它仅适用于特定的屏幕尺寸。代码看起来像这样。

aside#form{
   float: right;
   margin-right: 5%;
   width: 28%;
   line-height: 2em;
   background: #4a455c;
   color: #fff;
   padding: 0 50px;
}

我正在使用 css，但似乎无法弄清楚如何将顶部部分悬垂到其上方的元素中。

Image source

HTML如下

<aside id="form">
<h3>Join our mailing list</h3>
  <input type="email" placeholder="Your email address">
    <button type="button" class="button-3">Subscribe</button>
      <p>Lorem ipsum dolor sit amet, sed adipisicing elit, sed eiusmod do tempor.</p>
        <a href="#"><i class="fab fa-facebook-f fa-2x"></i></a>
        <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
        <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
        <a href="#"><i class="fab fa-github fa-2x"></i></a>

Answer 1

如果您的意思只是让背景侵占上面的元素，那么请尝试使用 style="margin-top: -2em;" 根据您希望它重叠的程度更改 -2。如果你想让它在滚动时完全滑过上面的元素，那么制作 style="position: fixed; z-index: 1;"

Answer 2

在我的方法中，这将是我的建议。在您的页脚中添加样式 position:relative; 我的示例如下。

<div class="footer" style="position: relative;">
  <form class="overhang-div" style="position: absolute; right:0; top: -20px;"></form>
</div>

我想让一个元素悬垂到它上面的元素中

I want to have an element overhang into the element above it

css

styling