在包装器内定位元素答案

【问题标题】：Positioning of elements inside a wrapper在包装器内定位元素
【发布时间】：2020-02-16 01:38:50
【问题描述】：

我有一个包装器（“overview-nav”）和三个跨度。跨度“overview-nav-current”位于第一个包装器的底部，我无法将它拖得更高，因此它出现在中间 float: top、margin-bottom、positive 或negative 都不起作用。

如果我将它设置为positon: relative，它会起作用，但是我有问题，上面的弹出框不能与元素重叠，如果它的定位相对 HTML-Popovers best-way / Positioning / Z-Index

  <div id="overview-nav" style="z-index: 0">
    <% p = ($system_type_app ? select_times_path : invoicing_path) %>
    <span class="overview-nav-btn">
    <%= link_to far_svg('chevron-left'), p(date: p_overview[:back_date], view: p_overview[:view]) %>
      </span>
    <span id="overview-nav-current">
    <%= link_to "Today", p(date: 'today', view: p_overview[:view]) %>
      </span>
    <span class="overview-nav-btn">
    <%= link_to far_svg('chevron-right'), p(date: p_overview[:forward_date], view: p_overview[:view]) %>
      </span>
  </div>

【问题讨论】：

标签： css-position

【解决方案1】：

“far_svg”是一个帮助器，它生成了一个影响跨度的 svg，带有文本“Today”。

我在“今天”一词下方放置了一个带有小文本的小 div，然后我能够将文本推高一点。

这确实不是最干净的方法，但是，它现在有效。

【讨论】：