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

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

Received on Tuesday, 2 December 2014 00:17:56 UTC