Re: Proposal for a new type of rendering box: overlay

Hi Tab,

Sorry I just saw this now - a few minutes after I posted a more lengthy
email about this.

The problem with this, as you have mentioned, is that it restricts the
parent element to have a relative position. I can't remember a particular
case right now, but if I remember correctly, this restriction that the
parent element should be relative makes this approach unusable in certain
conditions. for example when #example's position has to be different
depending on the screen size.


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

On Tue, Dec 2, 2014 at 11:17 AM, Tab Atkins Jr. <jackalmage@gmail.com>
wrote:

> On Wed, Nov 26, 2014 at 4:21 PM, Behrang Saeedzadeh <behrangsa@gmail.com>
> wrote:
> > 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.
>
> For some reason I can't access jetstrap.com at all, but I'm pretty
> sure that's just my internet connection being weird.
>
> Anyway, this appears to be already possible with existing CSS.  Just
> make the #example element position:relative, and then make the
> .my-overlay element position:absolute, with all four offsets set to 0.
> (Use z-index as well, if necessary, to ensure that it's on top of the
> container's contents.)
>
> ~TJ
>