Possible bugs when using fixed

[AQian0]

The popup toast is covered by other components.

At first I thought it might be the z-index that was causing this, however after I changed it to an extremely large value the situation remained unchanged. At this point I noticed that the section tag was in a strange place in the DOM - it was not under the root component nor under the component where the toaster is located. This is shown in the image below:

I realised that it was probably fixed causing the problem, so I cleared it and eventually the toast was able to display properly.

This seems to be caused by the DOM node being added to the wrong location... I'm sorry, but I'm not really sure how this component works, so I can't give any more information.

[uacode]

As possible solution - use teleport

<teleport to="body">
    <Toaster richColors class="pointer-events-auto" :expand="true" theme="system"/>
</teleport>