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>

使用CSS显示与父元素相对的工具提示

1 个答案: