html - 我无法弄清楚为什么工具提示（文本和提示）在固定的页眉和页脚 div 上流血

Question

我很可能是个白痴。希望我没有浪费任何人的时间。我知道我的代码很不稳定（只是用我所知道的做我能做的）。先感谢您。

问题：工具提示触发文本和工具提示在固定的页眉和页脚 div 上溢出。

在 w3 学校上找到了一些工具提示代码。它们工作正常，只是当我向上滚动时它们会溢出上面的 div。文本和提示都浮在上面的 div 上。（不知道我该如何解释）。这是工具提示的代码：

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

这是实现。它位于一列内 - 在容器中的一行内：

<div class="container2">
 <div class="row">
  <div class="column" style="background-color:#aaa;">stuff</div>
  <div class="column" style="background-color:#bbb;">stuff</div>
  <div class="column" style="background-color:#ccc;">  <div class="popup" onclick="myFunction()">ask<span class="popuptext" id="myPopup">Question Answered </br> Close</span></div>
 </div>
</div> 
</div>

我已经检查了 div，但我没有打开任何内容。我可能正在做一些有趣的事情（通过尝试让页眉和页脚粘贴）所以这里是容器 2 的 CSS：

.container2 {
margin-left:0;
left:0;
margin-top:140px;
width:100%;
background-color: white;
}

和列

/* Create three equal columns that floats next to each other */
.column {
 float: left;
 width: 33.33%;
 padding: 10px;
 height: 150px;
 background-color: #f1f1f1;
 border-radius: 15px;
 border-style: solid;
 border-color: white;
 margin-top:5px;

}

它流血的 div 是需要保持固定的页眉和页脚：

.header {
  position: fixed;
  left: 0;
  top: 0;
  Padding:15px;
  width: 100%;
  background-color: tan;
  color: black;
  text-align: left;
  clear: both;
  Height:100px;
}

和页脚 CSS

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  Padding:10px;
  width: 100%;
  background-color: tan;
  color: white;
  text-align: center;
  clear: both;
    Height:50px;
}

当我向上滚动时，即使没有激活工具提示，“询问”（提示的触发器）这个词也会在页眉上流血，但不会在页脚上流血。实际的工具提示在活动时会在页眉和页脚上流血（我猜这是预期的）。

我确信这与我抛出的所有这些“位置：固定/绝对/等”有关，因为当我更改这些命令时行为会发生变化。

我只是无法弄清楚为什么触发文本（“询问”一词）会流血。也许与“”有关？否则，页面的所有元素在我测试过的所有浏览器中都可以正常工作。

谢谢

标签： htmlcss