html - 悬停使元素出现在彼此之上

Question

这是我正在处理的(荷兰语)控制面板。当您将鼠标悬停在 CV 或 geen afspraak 上时，会显示相关内容。唯一的问题是:当您将鼠标悬停在 CV 上时，geen afspraak 会出现在其他文本上方，使其部分不可读。有人知道如何解决这个难题吗？

(为了让某些对象在悬停时以正确的方式出现，我给了它们position:absolute或relative，这取决于它的目标。这可能会导致问题，但我不知道如何解决。)

.control_panel {
  background-image: url(https://image.freepik.com/vrije-psd/witte-houtstructuur-achtergrond-ontwerp_1022-75.jpg);
  height: 400px;
  width: 400px;
  margin: 0 auto;
  margin-top: 100px;
  padding: 10px;
  border-radius: 4px;
}

.witte_achtergrond {
  padding: 12px;
  font-size: 16px;
  cursor: pointer;
}

.acsuel-dropdown {
  display: none;
  position: absolute;
  display: none;
  width: 100%;
  overflow: auto;
}

#broer:hover .acsuel-dropdown {
  display: block;
}

.geen_afspraak {
  position: relative;
}

#broer:hover {
  cursor: pointer;
}

#broer {
  position: relative;
}

.hoer:hover .veeltekst {
  display: block;
}

#saaf {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: -220px;
  margin-left: -10px;
}

.hoer {
  position: relative;
}

.veeltekst {
  text-overflow: none;
  white-space: normal;
  overflow: auto;
  display: none;
  position: absolute
}

<div class="control_panel">
  <div class="witte_achtergrond">Verklaring Omtrent het Gedrag</div>
  <div class="hoer">
    <div class="witte_achtergrond hover">CV</div>
    <p class="veeltekst">De afgelopen vijf jaar ben ik gepromoveerd op natuurwetenschappen, toen ben ik me nog meer gaan focussen op mijn werk als regisseur. Ik heb een zoon gekregen en heb verschillende bijbanen gehad in de filmwereld.<br><br> Creatief en enthousiast</p>
  </div>
  <div id="broer">
    <div class="witte_achtergrond geen_afspraak hover">
      geen afspraak
    </div>
    <div class="acsuel-dropdown">
      <table>
        <thead>
          <tr>
            <th class="wk">wk</th>
            <th>ma</th>
            <th>di</th>
            <th>wo</th>
            <th>do</th>
            <th>vr</th>
            <th class="weekend">za</th>
            <th class="weekend">zo</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="wk">13 </td>
            <td class="sq" class="previous" data-d ate="2018-03-26">26</td>
            <td class="previous" data-date="2018-03-27">27</td>
            <td class="previous" data-date="2018-03-28">28</td>
            <td class="previous" data-date="2018-03-29">29</td>
            <td class="previous" data-date="2018-03-30">30</td>
            <td class="previous weekend" data-date="2018-03-31">31</td>
            <td class="weekend" data-date="2018-04-01">1</td>
          </tr>
          <tr>
            <td class="wk">14 </td>
            <td data-date="2018-04-02">2</td>
            <td data-date="2018-04-03">3</td>
            <td data-date="2018-04-04">4</td>
            <td data-date="2018-04-05">5</td>
            <td data-date="2018-04-06">6</td>
            <td class="weekend" data-date="2018-04-07">7</td>
            <td class="weekend" data-date="2018-04-08">8</td>
          </tr>
          <tr>
            <td class="wk">15 </td>
            <td data-date="2018-04-09">9</td>
            <td data-date="2018-04-10">10</td>
            <td data-date="2018-04-11">11</td>
            <td data-date="2018-04-12">12</td>
            <td data-date="2018-04-13">13</td>
            <td class="weekend" data-date="2018-04-14">14</td>
            <td class="weekend" data-date="2018-04-15">15</td>
          </tr>
          <tr>
            <td class="wk">16 </td>
            <td data-date="2018-04-16">16</td>
            <td data-date="2018-04-17">17</td>
            <td data-date="2018-04-18">18</td>
            <td data-date="2018-04-19">19</td>
            <td data-date="2018-04-20">20</td>
            <td class="weekend" data-date="2018-04-21">21</td>
            <td class="weekend" data-date="2018-04-22">22</td>
          </tr>
          <tr>
            <td class="wk">17 </td>
            <td data-date="2018-04-23">23</td>
            <td data-date="2018-04-24">24</td>
            <td data-date="2018-04-25">25</td>
            <td data-date="2018-04-26">26</td>
            <td data-date="2018-04-27">27</td>
            <td class="weekend" data-date="2018-04-28">28</td>
            <td class="weekend" data-date="2018-04-29">29</td>
          </tr>
          <tr>
            <td class="wk">18 </td>
            <td data-date="2018-04-30">30</td>
            <td class="next" data-date="2018-05-01">1</td>
            <td class="next" data-date="2018-05-02">2</td>
            <td class="next" data-date="2018-05-03">3</td>
            <td class="next" data-date="2018-05-04">4</td>
            <td class="weekend next" data-date="2018-05-05">5</td>
            <td class="weekend next" data-date="2018-05-06">6</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 1

我使用 Mr Lister 解决了这个问题建议从 veeltekst 中删除 position:absolute。