Overlay for particular element

[weizenhuhn]

Hi,

I want to render an overlay for a <table> element, if a condition is set, but the input fields are still visible and accessible:

    <?php if($noOverlay) : ?>        
    <table class="form-table">
    <?php else: ?>
    <table class="overlay form-table">
    <?php endif; ?>
            <tbody>
              <tr>
                <td style="width: 200px">Input: </td>
                <td>
                  <label for="input1"> 
                  	<input name="input" type="text" id="input1">
                  </label>
                  </td>
              </tr>
      </table>

.sp-dsgvo-overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5) !important;
	z-index: 999999;
}

The result looks like that:

 

An overlay with fixed position would work, but the position of the table is dynamically, so it's not possible to just create a overlay for the whole screen.

I would be really appreciate for some help here, thanks!

[dsonesuk]

Try outer div container using position: relative; with div overlay and table within it. The div overlay and table must be sibling child elements for this to work! The overlay will use position: absolute; the table position: relative; give these a z-index so overlay overlaps table when required.

[weizenhuhn]

Finally I had a success. Thank you! That worked for me:

<div class="position-relative form-table">
  <div class="overlay"></div>
  <table class="position-relative">
    <tbody>
      <tr>
        <td style="width: 200px">Input: </td>
        <td>
          <label for="input1">
            <input name="input" type="text" id="input1">
          </label>
        </td>
      </tr>
  </table>
</div>

.position-relative{
	position: relative;
}
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5) !important;
	z-index: 20;
}

Result:

 

Edited October 1, 2019 by weizenhuhn