overlapping elements in St.BoxLayout

[Amy C <mathematical coffee gmail com>]

Hi all,

I have a St.BoxLayout into which I am placing box (St.BoxLayout) and
bin (St.Bin) vertically:

layout = new St.BoxLayout({vertical: true});
layout.add(box);
layout.add(bin);

The items in `box` are all of height 2em, but `box` itself is styled
to have height 1em. This is to make the items in `box` (buttons)
overlap the `bin` vertically.

The overlapping works fine, but the buttons appear *below* the
contents of the bin so are visually cut off.

If I try  `box.raise_top()`  to make the buttons in `box` appear on
top of `bin`, `box` moves (visually) to the very bottom of `layout`.

How can I keep `box` visually at the top of `layout`, but have the
buttons inside it overlapping `bin` and appearing on top of `bin`?

--------
One way tried was setting the height of `box` at run time like so:

layout.add(box);
Mainloop.idle_add(function () { // wait for height to be allocated
    box.y -= box.height/2;
});

This works, but causes a noticable relayout of `layout` where when it
first appears space has been allocated for the full `box.height`, and
then milliseconds later you see it flicker to the proper
`box.height/2`.

(I can't hard-code the height because it's in ems, not pixels).

The effect I'm thinking of is like how in the Overview the close
button overlaps the window thumbnail: imagine my `box` being full of
buttons that I want to half-overlap vertically with `bin` being the
thumbnail.

cheers.