html - 什么 CSS 规则导致我的绝对定位元素被隐藏

Question

我有一个非常简单的 HTML 结构，我试图实现的是让绝对定位的 div.outside 移动到包含 div.content 之外是相对定位的。对于我的情况，div.outside 必须 是div.content 的子项。我想知道是什么 CSS 规则导致它被隐藏？

我的假设是，由于 parent 有一个 overflow-x: scroll 然后 overflow-y: visible 的组合(自动设置通过浏览器？)是不可能的？如果是这种情况，是否有任何可能的方法在我给定的限制条件下实现这一目标？

HTML

<div class="parent">
  <div class="content">

    <div class="outside"></div>

     Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
     At maiores quo minima officia totam suscipit deleniti 
     perferendis fugiat, hic necessitatibus sit sapiente 
     aperiam, enim voluptatum, unde labore iste ea iusto!

  </div>
</div>

CSS

.parent {
  width: 250px;
  overflow-x: auto;
  margin-top: 100px;
}

.content {
  width: 500px;
  position: relative;
}

.outside {
  position: absolute;
  width: 10px;
  height: 10px;
  background: red;
  top: -10px;
  z-index: 999;
}

fiddle https://jsfiddle.net/pz7gkyyz/

** 编辑 **

为了给我的问题提供更多背景信息，我有一个在水平轴上滚动的表格，因为有很多列(但是只有表格滚动，而不是整个屏幕滚动)。可以将列标题悬停并显示工具提示。我使用标题作为相对点，并希望将工具提示向上偏移到当前被切断/隐藏的位置。

Answer 1

top : -10 是导致此问题的原因，如果您删除它，您将能够看到它。

.outside {
  position: absolute;
  width: 10px;
  height: 10px;
  background: red;
  top: -10px; // Remove this
  z-index: 999;
}