css - 使用 CSS 显示与父元素相关的工具提示

Question

我需要帮助显示与父元素相关的工具提示。引用屏幕 1 它显示描述是完美的 screen 1 .但是屏幕 2 Screen 2当我滚动部分描述时显示相同的位置，但我需要相对

<div class="item" data-key="15" data-value="244937">
    <input class="option" id="treemultiselect-0-15" type="checkbox">
    <span class="description">
        <label class="" for="treemultiselect-0-15">Ashram</label>
    </span>
    <div class="temp-description-popup" style="position: absolute;">
        No. &amp; Listing of <b>Ashrams</b><br>
    </div>
</div>

Answer 1

我想您正在寻找这样的东西，对吧？

您最好创建一个片段并重新创建您的问题，这样每个人都可以理解并帮助您解决问题。

问题是您设置了元素 position: absolute，所以它只是保持基于其 relative 父元素的位置。滚动不会移动它。

此示例将帮助您更好地理解位置的工作原理 https://codepen.io/AlHakem/pen/YayxBo

.scroller {
  max-height: 150px;
  overflow-y: scroll;
  height: 150px;
  float: left;
  width: 200px;
}

.item {
  position: relative;
}

.temp-description-popup {
  visibility: hidden;
  height: 0px;
}

.item:hover>.temp-description-popup {
  visibility: visible;
  height: auto;
  padding: 4px;
  background-color: #f1f1f1;
  border-radius: 4px;
  position: absolute;
  top: 25px;
  z-indeX: 2;
}

<div class="scroller">
  <div class="item" data-key="15" data-value="244937">
    <input class="option" id="treemultiselect-0-15" type="checkbox">
    <span class="description">
        <label class="" for="treemultiselect-0-15">Ashram</label>
    </span>
    <div class="temp-description-popup">
      No. &amp; Listing of <b>Ashrams</b><br>
    </div>
  </div>
  <div class="item" data-key="15" data-value="244937">
    <input class="option" id="treemultiselect-0-15" type="checkbox">
    <span class="description">
        <label class="" for="treemultiselect-0-15">Ashram</label>
    </span>
    <div class="temp-description-popup">
      No. &amp; Listing of <b>Ashrams</b><br>
    </div>
  </div>
  <div class="item" data-key="15" data-value="244937">
    <input class="option" id="treemultiselect-0-15" type="checkbox">
    <span class="description">
        <label class="" for="treemultiselect-0-15">Ashram</label>
    </span>
    <div class="temp-description-popup">
      No. &amp; Listing of <b>Ashrams</b><br>
    </div>
  </div>
  <div class="item" data-key="15" data-value="244937">
    <input class="option" id="treemultiselect-0-15" type="checkbox">
    <span class="description">
        <label class="" for="treemultiselect-0-15">Ashram</label>
    </span>
    <div class="temp-description-popup">
      No. &amp; Listing of <b>Ashrams</b><br>
    </div>
  </div>
  <div class="item" data-key="15" data-value="244937">
    <input class="option" id="treemultiselect-0-15" type="checkbox">
    <span class="description">
        <label class="" for="treemultiselect-0-15">Ashram</label>
    </span>
    <div class="temp-description-popup">
      No. &amp; Listing of <b>Ashrams</b><br>
    </div>
  </div>
  <div class="item" data-key="15" data-value="244937">
    <input class="option" id="treemultiselect-0-15" type="checkbox">
    <span class="description">
        <label class="" for="treemultiselect-0-15">Ashram</label>
    </span>
    <div class="temp-description-popup">
      No. &amp; Listing of <b>Ashrams</b><br>
    </div>
  </div>

</div>