如何并排放置 2 个可变大小的 div，其中一个在右侧

Question

我需要一个靠近页面顶部的空间，它应该在左侧包含一个菜单，在右侧包含一个工具提示区域。当人们移动鼠标或点击事物时，工具提示中的文本会发生变化。

我想出的代码有点工作，但它阻止人们点击正文中的 stackoverflow 链接。不知何故，某种“幽灵”区域出现在链接的“顶部”。

在 Chrome 中检查页面显示 Chrome 认为消息 div 比屏幕上显示的要大，与链接重叠。

任何线索如何解决这个问题，或者找到一个更好的方法让这个工具提示 div 出现在它的位置？

window.addEventListener('load', () => {
d3.selectAll('span')
  .on("mouseover", function(e) {
    d3.select('#tooltip')
      .text("Hello folks")
  })
  ;
});

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: #354052;
}
header {
    width: 100%;
    height: 54px;
    background: #14b2c7;
    color: #ffffff;
    vertical-align: middle;
    overflow: hidden;
    font-size: 2em;
    font-weight: bold;
    white-space: nowrap;
}
#body {
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding: 10px;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
div#menu2 {
    color: #14b2c7;
    height:27px;
    overflow: hidden;
}
div#message {
    height:27px;
  position: relative;
}
span.link {
    cursor: pointer;
    font-size: 1.25em;
    padding-right: 20px;
}
span.link.active {
    text-decoration: underline;
}
div#tooltip {
  position: absolute;
  right: 12px;
  bottom: 0;
  height: 12px;
  color: white;
  background-color: #354052;
  padding-bottom: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<header>
<a href="https://stackoverflow.com"><img id="mainsite" src="https://stackoverflow.com/favicon.ico" /></a>
 <span class="helper">&nbsp;</span><span id="heading">My test page</span>
</header>
<div id="body">
<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>
&nbsp;
<div id="tooltip">
&nbsp;
</div>
</div>
Here is a link to <a href="https://stackoverflow.com">stackoverflow</a>
</div>

Answer 1

在包含所有跨度（菜单）的 div 和带有 id 消息的 div 之间有一个字符（非中断空格）。

如果您将其替换为可以看到的字符，那么您会注意到它与以下文本位于同一位置。它实际上是对高度为 27px（宽度为 100%）的 div 的溢出，但溢出并没有被隐藏。

有多种方法可以解决这个问题。例如确保没有这样的虚假字符。这个 sn-p 只是将溢出设置为隐藏以解决问题，但您可能希望查看整个 HTML 结构。例如，将内容也放在一个 div 中并有明确的样式分离可能是很自然的。

window.addEventListener('load', () => {
  d3.selectAll('span')
    .on("mouseover", function(e) {
      d3.select('#tooltip')
        .text("Hello folks")
    });
});

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: #354052;
}

header {
  width: 100%;
  height: 54px;
  background: #14b2c7;
  color: #ffffff;
  vertical-align: middle;
  overflow: hidden;
  font-size: 2em;
  font-weight: bold;
  white-space: nowrap;
}

#body {
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  padding: 10px;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

div#menu2 {
  color: #14b2c7;
  height: 27px;
  overflow: hidden;
}

div#message {
  height: 27px;
  position: relative;
  /* ADDED */
  overflow: hidden;
}

span.link {
  cursor: pointer;
  font-size: 1.25em;
  padding-right: 20px;
}

span.link.active {
  text-decoration: underline;
}

div#tooltip {
  position: absolute;
  right: 12px;
  bottom: 0;
  height: 12px;
  color: white;
  background-color: #354052;
  padding-bottom: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<header>
  <a href="https://stackoverflow.com"><img id="mainsite" src="https://stackoverflow.com/favicon.ico" /></a>
  <span class="helper">&nbsp;</span><span id="heading">My test page</span>
</header>
<div id="body">
  <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>
    &nbsp;
    <div id="tooltip">
      &nbsp;
    </div>
  </div>
  Here is a link to <a href="https://stackoverflow.com">stackoverflow</a>
</div>

Answer 2

为此，您需要使用z-index 和position:relative 属性来建立您的链接。因为工具提示的优先级最高，position:absolute。

.stack-link {
  position: relative;
  z-index: 10;
}
.stack-link:hover {
  border-bottom: 2px solid brown;
}

d3.selectAll('span').on('mouseover', function(e) {
  d3.select('#tooltip').text('Hello folks');
});

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: #354052;
}

header {
  width: 100%;
  height: 54px;
  background: #14b2c7;
  color: #ffffff;
  vertical-align: middle;
  overflow: hidden;
  font-size: 2em;
  font-weight: bold;
  white-space: nowrap;
}

#body {
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  padding: 10px;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

div#menu2 {
  color: #14b2c7;
  height: 27px;
  overflow: hidden;
}

div#message {
  height: 27px;
  position: relative;
}

span.link {
  cursor: pointer;
  font-size: 1.25em;
  padding-right: 20px;
}

span.link.active {
  text-decoration: underline;
}

div#tooltip {
  position: absolute;
  top: 0;
  right: 12px;
  /* height: 12px; */
  color: white;
  background-color: #354052;
  /* padding-bottom: 8px; */

  height: 100%;
  display: flex;
  align-items: center;
}


/* new class */

.stack-link {
  position: relative;
  z-index: 10;
}

.stack-link:hover {
  border-bottom: 2px solid brown;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<header>
  <a href="https://stackoverflow.com"><img id="mainsite" src="https://stackoverflow.com/favicon.ico" /></a>
  <span class="helper">&nbsp;</span><span id="heading">My test page</span>
</header>
<div id="body">
  <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>
    &nbsp;
    <div id="tooltip">&nbsp;</div>
  </div>
  Here is a link to
  <a class="stack-link" href="https://stackoverflow.com">stackoverflow</a>
</div>