HTML-Techniken zur unteren Positionierung, die untergeordnete Elemente unberührt lassen

Question

Ich habe einen Text mit einem Tooltip. Ich kann die Eigenschaften des Felds selbst nicht ändern, möchte aber, dass der Tooltip über dem Text platziert wird. Das ist mein aktueller Code:

.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>

Ich denke, der beste Weg, das zu erreichen, was ich will, ist tooltip-text中使用bottom: 100%，但是当我这样做时，bottom是相对于页面底部计算的，而不是相对于tt-container的底部。我想这是因为我必须在tt-container上使用position: relative，但这将导致提示框被框的边缘覆盖。我尝试在tt-container外部创建另一个带有position: relative的div, aber das Ergebnis ist das gleiche und ich kenne keinen anderen Weg. Ist das möglich?

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;，无法使工具提示框超出框外。