<import src="../resources/dump-as-render-tree.sky" />

<style>
  block, p, flex {
    width: 100px;
    height: 100px;
    margin-bottom: 50px;
    /* Make it a positioning root. */
    transform: translate3d(0, 0, 0);
  }
  block { background: pink; }
  p {
    background: orange;
  }
  flex {
    background: salmon;
    display: flex;
    flex-direction: row;
  }
  spacer {
    height: 30px;
    width: 30px;
    border: 5px solid purple;
    background: papayawhip;
  }
  absolute {
    position: absolute;
    width: 20px;
    height: 20px;
    background: green;
  }
</style>
<block>
  <spacer />
  <absolute />
  <spacer />
</block>

<p>
  <spacer />
  <absolute />
  <spacer />
</p>

<flex>
  <spacer />
  <absolute />
  <spacer />
</flex>