使两个子代具有两个不同的z-index，而不考虑父代的z-index

Question

说我有以下HTML标记：

<div class="site-banner">
    <div class="parent">
        <div class="children-1">
            some nice text
        </div>
        <div class="children-2">
            <button>button</button>
        </div>
    </div>

    <img class="building"/>
</div>

并说id看起来像这样：

现在我想发生的是，当用户向下滚动时，父级保持固定，并且标题/按钮将具有该行为：

因此从逻辑上讲CSS应该是这样的：

.parent{
    position: fixed;
}
.children-1{
    position: relative;
    z-index: 2;
}
.children-1{
    position: relative;
    z-index: 1;
}
.children-2{
    position: relative;
    z-index: 3;
}

但是它不起作用，两个孩子都获得了父对象的z-index，如果父对象的z-index为4，那么如果父对象的标题和按钮都位于建筑物的前面Z索引为2，那么两者都会在建筑物后面，我无法将它们分开。

我所做的一件事是将父级分离为两个父级，因此按钮和标题不会具有相同的父级，并将z-index置于两个父级。 但是我希望按钮位置相对于标题，因此它始终在标题下方具有相同的距离，将它们分隔为两个父级后，我在某种分辨率上有些混乱，我需要为按钮设置不同的top属性/ title有很多分辨率。

有没有办法与一位父母达成我想做的事情？