You might know that display: contents; does what it states it does: it only shows an element’s contents, just as if you were to remove the opening and closing tag.
But what about the element’s attributes? What about the bound JavaScript events? What about … ? Ire Aderinokun digs deeper.
In the simplified example #bird is positioned at x=50%,y=50% of it’s parent #birdwrapper, which itself is positioned at x=698,y=1219 in it’s own enclosing parent, mimicking absolute-relative positioning wich we know from CSS. As an extra visual indicator both #bird and #birdwrapper contain an extra <rect> to visualize their bounding boxes.