如何实现两个可变宽度div左右排列且解决提示框遮挡下层链接问题

问题原因 #

你遇到的链接无法点击问题，核心是#message元素的实际渲染高度超出了你设置的27px，溢出的部分覆盖在了下方的链接区域，导致链接无法接收点击事件。溢出的诱因是#message内部menu2和tooltip之间的空格字符触发了默认行高，加上你没有对#message做溢出限制。

解决方案 #

快速修复

直接给#message添加溢出隐藏属性，强制裁剪超出设定高度的内容，即可解决覆盖问题，修改对应的CSS即可：

div#message {
    height:27px;
    position: relative;
    overflow: hidden; /* 新增这一行 */
}

同时可以删除#message中menu2和tooltip之间多余的 空格，避免额外高度生成。

更优布局方案

用Flex布局替代绝对定位实现左右排列，布局更稳定，不会出现溢出覆盖问题，修改如下：

1. 调整#message的CSS为Flex布局：

div#message {
    height:27px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

2. 调整#tooltip的CSS，去掉绝对定位相关属性：

div#tooltip {
  height: 20px; /* 合并原高度和padding-bottom的总高度 */
  line-height: 20px;
  color: white;
  background-color: #354052;
  padding: 0 6px; /* 新增左右内边距避免文字贴边 */
  margin-right: 12px;
}

3. 调整HTML结构，删除#message内部多余的 空格：

<div id="message">
  <div id="menu2">
    <span class="link" data-id="search">Search</span>
    <span class="link" data-id="filter">Filters</span>
    <span class="link" data-id="gettingstarted">Getting started</span>
    <span class="link" data-id="tips">Tips</span>
    <span class="link" data-id="key">Key</span>
  </div>
  <div id="tooltip">
    &nbsp;
  </div>
</div>

修改后tooltip会一直固定在#message的右侧，和左侧菜单垂直对齐，也不会出现溢出覆盖下层内容的问题。

如果一定要保留绝对定位的写法，也可以给#tooltip添加pointer-events: none属性，就算元素溢出也不会阻挡下层元素的点击事件，但属于治标方案，更推荐调整布局的方式。

内容的提问来源于stack exchange，提问作者Nikki Locke