什么 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;
}

小提琴https://jsfiddle.net/pz7gkyyz/

**编辑**

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

Answer 1

顶部：-10导致此问题，如果将其删除，您将能够看到它。

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

Answer 2

你的CSS没有问题。.outside是一个空的div。在.outside内移动文本内容

.parent {
width: 250px;
overflow-x: auto;
}
.content {
width: 500px;
background:red;
position: relative;
}
.outside {
position: absolute;
width: 10px;
height: 10px;
background: red;
top: 10px;
overflow:hidden;
z-index: 999;
}

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