保持子元素不受影响的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;，无法使工具提示框超出框外。