Um ein Element über einem anderen Element zu platzieren, wird CSS-Hilfe benötigt.

Hallo,

ich möchte mittels CSS 2 Felder übereinander legen, um später das eine Feld bedingt an oder auszublenden und so die Farbe des Feldes zu ändern.
Das Übereinaderlegen funktioniert. Jetzt ist allerdings das Farbfeld im Vordergrund und die Checkboxen lassen sich nicht anklicken. Wie kann ich das Farbfeld in den Hintergrund schieben, sodass die Checkboxen weiterhin nutzbar sind?

Danke und beste Grüße

Hi Sebastian_Schubert,

Thanks for reaching out to Jotform Support. Our German Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in German, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, I reviewed your form and it appears you have added a divider element with increased height and position absolute to place the div on top of another div containing the multiple-choice elements. Due to this, the checkboxes are not clickable. We can add CSS code for multiple-choice list items / form-line classes to overlay on the divider element. Let's see how to do this.

You have added CSS code for id_1492 to show the background color on top of the multiple-choice element #id_470.

[data-css-selector="id_1492"] div.divider {

  position: absolute;

  top: -50px;

  width: 700px;

  opacity: 0.3;

}

To rectify this, you should add CSS code for the multiple-choice list item i.e. li#id_470. You can paste the CSS code given below:

/* To overlay on the divider element*/

li#id_470 {

  top: 0;

  z-index: 9;

}

Let me show you how to add CSS to the form:

1. In Form Builder, click on the Paint Roller icon at the top right corner.
2. Click on the Styles tab.
3. Scroll down to the Inject Custom CSS section, and paste the CSS code given above:

That's it. You need to add the same CSS code and change the ID of the target element. Check out the screenshot below to see the result:

Give it a try and let us know how it goes.