title: Color overlay above form?
body: <p>I have created this form: <a href="https://radlvoo.de/jans-testplatz/" rel="nofollow noreferrer">https://radlvoo.de/jans-testplatz/</a></p>
  
  <p>But I want to have an overlay above the whole form. I already have googled and tried to use this CSS styling:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>z-index: 500;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="rahmenhöhenRechnerOverlay" style="z-index: 500;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;/* background-color: rgba(0,0,0,0.5); */overflow: auto;"&gt;
    &lt;form class="filterform form-inline"&gt;
      &lt;div class="form-group"&gt;&lt;label class="control-label"&gt;FAHRRADTYP&lt;/label&gt;&lt;br&gt;
        &lt;select id="fahrradtypHöhenrechner" class="form-control" name="typ"&gt;&lt;option value=""&gt;Bitte wählen…&lt;/option&gt;&lt;option value="trekkingrad"&gt;TREKKINGRAD&lt;/option&gt;&lt;option value="cityrad"&gt;CITYRAD&lt;/option&gt;&lt;option value="mountainbike hardtail"&gt;MOUNTAINBIKE HARDTAIL&lt;/option&gt;&lt;option value="mointainbike fully"&gt;MOUNTAINBIKE FULLY&lt;/option&gt;&lt;option value="crossrad"&gt;CROSSRAD&lt;/option&gt;&lt;option value="rennrad"&gt;RENNRAD&lt;/option&gt;&lt;/select&gt;
        &lt;p
          class="empty"&gt;&lt;/p&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;&lt;label class="control-label"&gt;GESCHLECHT&lt;/label&gt;&lt;br&gt;
        &lt;select id="geschlechtHöhenrechner" class="form-control" name="geschlecht"&gt;&lt;option value=""&gt;Bitte wählen…&lt;/option&gt;&lt;option value="damen"&gt;DAMEN&lt;/option&gt;&lt;option value="herren"&gt;HERREN&lt;/option&gt;&lt;/select&gt;
        &lt;p class="empty"&gt;&lt;/p&gt;
        &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;&lt;label class="control-label"&gt;FAHRSTYLE&lt;/label&gt;&lt;br&gt;
        &lt;input name="fahrstyle" type="radio" value="sportlich"&gt; Sportlich orientiert&lt;br&gt;
        &lt;input name="fahrstyle" type="radio" value="touren"&gt; Touren orientiert
        &lt;p class="empty"&gt;&lt;/p&gt;
        &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;&lt;label class="control-label"&gt;SCHRITTHÖHE&lt;/label&gt;&lt;br&gt;
        &lt;input id="schritthöheInput" min="0" name="schritthöhe" type="number"&gt;
        &lt;p class="empty"&gt;&lt;/p&gt;
        &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group form-group-block" style="margin-top: 20px;"&gt;&lt;button style="display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; color: #ffffff; background-color: #26aef2; border-color: #26aef2;"
          type="button"&gt;Rahmenhöhe berechnen&lt;/button&gt;&lt;/div&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But sadly it isn't working... How can I create an overlay which goes from the top of the form till the bottom of the form and also above the form itselfs?</p>
  
  <p>Kind regards</p>