如何在HTML中實現元素的層疊效果？

Question

我想為這個元素製作一個自訂的工具提示，但是它被包含在一個框中，這個框沒有足夠的空間來顯示工具提示，所以它只是被裁剪了（實際上我可以滾動來顯示它，因為overflow被設定為auto，但我希望它能夠在不滾動的情況下可見）。有沒有辦法讓它超出邊界顯示？我嘗試過使用z-index但沒有效果。

這就是我所說的：

.box {
  width: 100px;
  height: 100px;
  overflow: auto;
  border-style: solid;
  border-color: red;
}

.tooltip {
  padding-top: 20px;
  position: relative;
  display: inline-block;
}


.tooltip .tooltiptext {
  display: none;
  max-width: 60vw;
  min-width: 15vw;
  background-color: white;
  border-style: solid;
  border-color: #1a7bd9;
  position: absolute;
  z-index: 1000000;
}

.tooltip:hover .tooltiptext {
  display: block;
}

<div class='box'>
  <div class='tooltip'> 滑鼠懸停顯示工具提示
    <div class='tooltiptext'>
      哇，這太棒了，這是一個史詩級的工具提示文本
    </div>
  </div>
</div>

編輯：重要的是懸停在元素上有效，而不是它所在的框框上。

Answer 1

一種實作方法是建立一個位於被懸停文字上方和旁邊的::before偽元素。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  width: 100px;
  height: 100px;
  padding-top: 20px;
  border-style: solid;
  border-color: red;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip::before {
  content: "哇，这太棒了，这是一个史诗般的工具提示文本";
  position: absolute;
  left: 25%;
  bottom: -75%;
  display: none;
  width: 500px;
  background-color: white;
  border: 2px solid pink;
}

.tooltip:hover::before {
  display: flex;
}

<div class='box'>
  <div class='tooltip'>
    鼠标悬停查看工具提示
  </div>
</div>

Answer 2

有很多方法可以實現，但如果你只是想讓工具提示在容器外可見，你不需要使用z-index或overflow。你只需要將工具提示移到相對容器內的定位上下文。

根據你的評論，由於你希望工具提示只在懸停在文本上時出現，我建議你的相對容器精確地包裹住你想懸停的內容。為了說明這一點，我在外框上添加了一個邊框，與你決定使用相對容器的位置相比。

然後，只需將box:hover更改為relative-container:hover以定位到正確的元素。

我試圖組織HTML和類別名，使其更具語義性和簡潔性以進行說明。希望對你有幫助！

範例

.box {
  padding: 30px;
  border: blue solid;
  width: 300px;
  display: flex;
  align-items: center;
}

.relative-container {
  position: relative;
}

.box-content {
  border-style: solid;
  border-color: red;
  padding: 10px;
}

.tooltip {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 60vw;
  min-width: 15vw;
  background-color: white;
  border: #1a7bd9 solid;
  display: none;
}

.relative-container:hover .tooltip {
  display: block;
  cursor: pointer;
}

<div class='box'>
  <div class='relative-container'>
    <div class='box-content'>
      Hover for tooltip. I have a little padding to give the text some room.
    </div>
    <div class='tooltip'>
    Wow, this is amazing, such an epic tooltip text. I'm aligned with the top of the box content containing text and take up the full width. I only appear when hovering over the box content (red outline), not the surrounding container (blue outline).
    </div>
  </div>
</div>