How do you layer elements in Checkout UI extensions?

[Gregles]

I'm building a plugin for a client and have it loading results into the page but they sit behind the elements below and I can't find any way to make something a higher level. I considered position: Absolute but that doesn't seem to do anything (always stays as relative).

This is what it looks like now:

And this is what I would like it to look like:

If anyone can point me to the right setting on component that would be great.

The results sit in a 1px high block layout element if that helps:

const blockLayout = root.createComponent(
    BlockLayout,
    {
      rows: ['auto', 1],
      overflow: 'visible'
    },
    [
      makeField(),
      resultBlock, 
    ],
  );

And the results are currently in a View block:

const viewLayout = root.createComponent(
    BlockLayout,
    {
      id: 'viewBlock',
      rows: ['auto', 'fill', 'auto'],
    },
    [
      root.createComponent(View, {}, viewResultHeader),
      scrollView,
      root.createComponent(View, {}, viewResultFooter),
    ],
  );

Unless there's a way to inject CSS I haven't found yet?

Thanks in advance.

[Gregles]

Hi, Thanks for the response, but I wanted to know how to actually set things like the Z-index on a checkout ui extension and when I set the position value it does nothing. There doesn't seem to be an option or any way to apply CSS that I can see?