保持子元素不受影響的HTML底部定位技巧

Question

我有一個帶有提示框的文字。我無法更改框本身的屬性，但我希望將提示框放在文字上方。這是我現在的程式碼：

.tt-container .tooltiptext {
    display: none;
    background-color: white;
    border-style: solid;
    position: absolute;
    border-color: #1a7bc9;
    color: #000;
    text-align: left;
    border-radius: 6px;
    padding: 15px 15px;
    width: 300px;
    /*bottom: 100%;*/
}
.tt-container:hover .tooltiptext {
    display: block;
}
.tt-container {
    border-style: solid;
    display: inline;
}
.box {
    /*I cannot make changes to this*/
    width: 200px;
    height: 200px;
    border-style: solid;
    border-color: red;
    overflow: auto;
}

<div class="box"><br><br>
    <div class="tt-container">
        <span class="tooltiptext">一些占用大量空间的文本</span>
        文本
    </div>
</div>

我認為實現我想要的最好的方法是在tooltip-text中使用bottom: 100%，但是當我這樣做時，bottom是相對於頁面底部計算的，而不是相對於tt-container的底部。我想這是因為我必須在tt-container上使用position: relative，但這將導致提示框被框的邊緣覆蓋。我嘗試在​​tt-container外部建立另一個帶有position: relative的div，但結果相同，我不知道其他方法。這種情況是否可能實現？

Answer 1

    
.tt-container .tooltiptext {
    display: none;
    background-color: white;
    border-style: solid;
    position: absolute;
    bottom:100%;
    border-color: #1a7bc9;
    color: #000;
    text-align: left;
    border-radius: 6px;
    padding: 15px 15px;
    width: 300px;
   
}
.tt-container:hover .tooltiptext {
    display: block;
  
}
.tt-container {
    border-style: solid;
    display: inline;
    position:relative;
}
.box {
    /*I cannot make changes to this*/
    width: 200px;
    height: 200px;
    border-style: solid;
    border-color: red;
    overflow: auto;
}

<div class="box"><br><br>
    <div class="tt-container">
        <span class="tooltiptext">一些更多的占用空间的文本</span>
        文本
    </div>
</div>

你應該將父元素的position: relative設定為position:absolute，以使其相對於父元素定位。 由於overflow: auto;，無法使工具提示框超出框外。