css：将父元素置于父母兄弟之上

Question

我在彼此旁边有两个元素，两个元素都可以单独滚动。结构如下所示：

<splitter>
    <split-pane class="resizable">
        <article class="content">
            <div class="bar-foo">
            <div class="positionable"></div>
        </div>
        </article>
        <splitter-control class="ui-resizable-handle ui-resizable-e"></splitter-control>
    </split-pane>
    <split-pane >
        <article class="content">
            <div class="bar-foo foo-bar"></div>
        </article>
    </split-pane>
</splitter> 

（DEMO）

在第一个元素中，我有这个绝对定位的元素。我想要的是这个绝对定位元素也随着滚动而移动，但是在其他所有元素之上。该演示几乎可以做到这一点，除了它不在第二个split-pane之上。

我尝试将溢出属性从.content类更改为

.content {
    overflow-x: visible;
    overflow-y: auto;
    ...

但是做得不多：（

可以这样做吗？任何帮助将不胜感激！