How to make simple overlay container in React

Issue #699

Use term ZStack like in SwiftUI, we declare container as relative position. For now it uses only 2 items from props.children but can be tweaked to support mutiple

class App extends React.Component {
    render() {
        return (
            <ZStack>
                <Header />
                <div css={css`
                    padding-top: 50px;
                `}>
                    <Showcase factory={factory} />
                    <Footer />
                </div>
            </ZStack>
        )
    }
}

/** @jsx jsx */
import React from 'react';
import { css, jsx } from '@emotion/core'

export default function ZStack(props) {
    return (
        <div css={css`
            position: relative;
            border: 1px solid red;
        `}>
            <div css={css`
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                z-index: -1;
            `}>
                {props.children[0]}
            </div>
            <div >
                {props.children[1]}
            </div>
            
        </div>
    )
}

---

Updated at 2021-01-15 22:03:49