Proposal for a new type of rendering box: overlay

Hi,

It would be nice if we had a new type of rendering box called *overlay*.

Then we could define an overlay div like this:

*div.my-overlay {*
*   display: overlay;*
*}*


Then if had an HTML markup similar to:

*<div id="example">*
*  Lorem ipsum*
*  <div class="my-overlay">*
*    An overlay*
*  </div>*
*</div>*


.my-overlay would always overlay #example. If the size, and position of
#example got changed either programmatically or due to application of a
specific media query, or in any other way, then .my-overlay would get
resized automatically to cover the entire #example.

An overlay element can have its children, and its children might have
overlays as well.

This is helpful especially for building web-based drag and drop
environments (e.g. https://jetstrap.com/) as well as for building any type
of overlay divs.


Best regards,
Behrang
http://www.behrang.org