Popup validator hidden

I have a RequiredValidator that is set to popup. When it pops, it is underneath an edit box below it. Is this normal? I followed the documentation and set the edit box to "display: block" and the validator to "position: absolute" and it's showing up behind the edit box below it. You can barely see the red triangle, and the body is completely under the next text edit box. Why is this?

Here's the razor:

<div class="row align-items-center" style="margin-bottom: 1rem">
   <div class="col-3" style="padding-left: 0px; padding-right: 0px">
      <RadzenLabel Component="lanGWTextBox" style="text-align: right; width: 100%" Text="LAN GW IP Address">
            </RadzenLabel>
   </div>
   <div style="padding-left: 15px; padding-right: 15px">
      <RadzenTextBox style="display: block; width: 135px" @bind-Value="@(networkSettings.lanGW)" Name="LanGWTextBox" Change="@LanGwTextBoxChange"></RadzenTextBox>
      <RadzenRequiredValidator Component="LanGWTextBox" Popup="true" style="position: absolute" Text="Cannot be empty!">
      </RadzenRequiredValidator>
   </div>
</div>
<div class="row align-items-center" style="margin-bottom: 1rem">
   <div class="align-items-center d-flex  col-3" style="padding-left: 0px; padding-right: 0px">
      <RadzenLabel Component="ntpServerTextBox" style="text-align: right; width: 100%" Text="NTP Server IP Addresses">
      </RadzenLabel>
   </div>
   <div class="col-6">
      <RadzenTextBox style="display: block; width: 100%" @bind-Value="@(networkSettings.timeServers)" Name="NtpServerTextBox" Change="@NtpServerTextBoxChange">
      </RadzenTextBox>
   </div>
   <RadzenIcon Icon="help_outline" MouseEnter="@Icon0MouseEnter" MouseLeave="@Icon0MouseLeave">
   </RadzenIcon>
</div>

The div below that is on top of the validator. Do you want the validator to appear on top of other controls?

If yes set the position of both <div class="row"> to relative and the z-index of the first to some value e.g. 1.

<div class="row align-items-center" style="margin-bottom: 1rem; position: relative; z-index:1">
</div>
<div class="row align-items-center" style="margin-bottom: 1rem; position: relative">
</div>

This would lead to:

Otherwise increase the bottom margin so there is enough room for the validator to appear.

<div class="row align-items-center" style="margin-bottom: 48px;">
</div>

Ah, z-index! Yes, this works! So if I had a series of fields, in a series of rows....for the popup to appear on top no matter what...I would have to assign a ever increasing order of z-index to ensure the box from above is always on top of the row below it? As I recall, the default z-index order is the later html elements have a higher index than the previous, which is backwards from what I would need.

Thank you for the help!

PS: Is the z-index adjustable from the Radzen property/style panel aside from using an attribute?

It is indeed backwards. And to add insult to injury z-index does not work by default - it needs position to be set too.

Yes, you can set style to a Row component via custom attribute: