Sp-textfield overlaps absolute positioned element

,

I have an absolute positioned element at the bottom of the panel (logout) that stays there when the root div scrolls. If there is a sp-textfield in the panel, the placeholder part overlaps the absolute positioned element. I tried changing z-indexes, but can’t seem to find anything that would cause this or how to fix it:

.logout-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 5px;
  background-color: var(--uxp-host-background-color);
  width: 100%;
  height: 30px;
}
sp-textfield {
  display: block;
  margin-bottom: 25px;
}

This is a known issue: https://www.adobe.io/photoshop/uxp/uxp/known-issues/#user-interface

While z-index is supported, no element can overlay a widget that has text editing capabilities. Text fields and areas will always render the text editor above everything else in the same panel or dialog. As such, you can use popovers to render content above them, or hide the element if you need to render some content above it.