Understanding CSS positioning in Plasmic

Hey gents! Will you help us understand CSS Positioning in Plasmic?

Essentially, we want to create a pop-up modal. We’ve got a parent block with the Position to “Free” and “Push to Cover,” and a Z-Index of 99999, however, it’s not behaving as expected in the Preview.

Kindly help? :slightly_smiling_face:

• Project: 58CNSVogj92RP9LTu21UrC
• Component: AuthModal2
◦ Variant: PopUp
• Page: /signup

Hey Christopher, we currently do not support setting position: fixed in studio. What is happening there is that the “Free” Position is making the element have a position: absolute, so the position of the box is not correct.

A possible workaround is to create a code component that works as a fixed overlay, register it in you app-hosted init.ts, then use it in studio, e.g.

function FixedOverlay({children}) {
  return <div style={{background: "rgba(0,0,0,0.5)", position: "fixed", top: 0, left: 0, bottom: 0, right: 0, zIndex: 9999}}>{children}</div>;
}

Thanks, Tiago! I suspect this is something that you’re working on adopting?

Yes! That’s something that we’ve been discussing and should support soon.

Your code component worked! Thanks Tiago!