Solving z-index/Layering Problems

Because of the way stacking contexts work in CSS, you may find that embedding a element within a hero experience results in clipping or "bleedthrough".

If one of the ancestor elements of the hero sets the CSS <overflow: hidden> property it will clip the content, and open mosaic contents may not appear correctly.

This also is a problem when a hero's ancestor element creates a stacking context and sets the z-index too low so that it won't appear above the content.

Setting a hoist attribute:

hoist - When the mosaic is hoisted, it's internal content will be appended to the bottom of the page body in an element named or (depending on which displaymode value is set). This setting is useful when you want to ensure the mosaic content is always on top of content, and the existing place in the page body has a specific z-index set that you can't break out of. It's recommended that you only use this feature when necessary.

<syndigo-mosaic pageid="1234" hoist> </syndigo-mosaic>

will move the mosaic contents to a DOM element that is appended to the document's body (displaymode can be ribbon{default} or modal):

<syndigo-mosaic-ribbon> ... <!-- appended to doc body if displaymode is ribbon -->

<syndigo-mosaic-modal> ... <!-- appended to doc body if displaymode is ribbon -->