html - 页脚上方的 Div 影响页脚样式，如何解决？

Question

我正在尝试为我们的用户开发一个帮助我的功能。为此，我试图在页脚上方放置一个 div。但是，我的 div 样式影响了页脚，我无法弄清楚原因。

我正在努力实现的外观 -

当我尝试实现时它看起来如何 -

我的样式会影响页脚样式。

这是我的html代码

<div class="help-img pull-right">
    <a href="https://google.com">
        <img src="~/Content/images/icon-help.png?version=@buildVersion" />
    </a>
</div>
<footer class="clearfix">
    <div class="pull-left">
        <span id="footerYear"></span> &copy; <a href="https://viacommediaservices.visualstudio.com" target="_blank">VMS Web @ViewContext.Controller.GetType().Assembly.GetName().Version</a>
    </div>
    <div class="pull-right">
        <a href="~/content/help/VMSWeb One Sheet.pdf" target="_blank">VMS Web User Guide</a> |
        <a href="javascript:void(0)" onclick=";">Terms of Use</a>
    </div>
</footer>

我的 CSS -

.help-img {
    position: relative;
    bottom: 50px;
    margin-right: 28px;
}

感谢任何帮助。谢谢

Answer 1

您需要包裹您的元素以便能够相对定位它们。或者你可以使用 flexbox 布局模型，这在这种情况下更合适。

.wrapper{
  display:flex;
  flex-direction:column;
}
.help-img {
    margin-right: 28px;
    align-self:flex-end;
    margin-bottom:5px;
    background-color:#f1f1f1;
}

.clearfix{
  display:flex;
  justify-content:space-between;
  background-color:#f1f1f1;
}

<div class="wrapper">
  <div class="help-img pull-right">
      <a href="https://google.com">
      <img src="~/Content/images/icon-help.png?version=@buildVersion" />
      </a>
      Need Help? <strong>Click Here</strong>
  </div>
  <footer class="clearfix">
      <div class="pull-left">
          <span id="footerYear"></span> &copy; <a href="https://viacommediaservices.visualstudio.com" target="_blank">VMS Web @ViewContext</a>
      </div>
      <div class="pull-right">
          <a href="~/content/help/VMSWeb One Sheet.pdf" target="_blank">VMS Web User Guide</a> |
          <a href="javascript:void(0)" onclick=";">Terms of Use</a>
      </div>
  </footer>
</div>