Teknik kedudukan bawah HTML yang memastikan elemen kanak-kanak tidak terjejas

Question

Saya ada teks dengan petua alat. Saya tidak boleh menukar sifat kotak itu sendiri, tetapi saya mahu petua alat diletakkan di atas teks. Ini kod semasa saya:

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

Saya rasa cara terbaik untuk mencapai apa yang saya inginkan adalah dalam tooltip-text中使用bottom: 100%，但是当我这样做时，bottom是相对于页面底部计算的，而不是相对于tt-container的底部。我想这是因为我必须在tt-container上使用position: relative，但这将导致提示框被框的边缘覆盖。我尝试在tt-container外部创建另一个带有position: relative的div tetapi hasilnya adalah sama dan saya tidak tahu cara lain. Adakah ini mungkin?

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>

Anda harus meletakkan position: relative设置为position:absolute elemen induk supaya ia diposisikan secara relatif kepada elemen induk. Disebabkan overflow: auto;, tiada cara untuk membuat kotak petua alat berada di luar kotak.