How to avoid overlapping (overlapping) <select> elements in a form on the same page?

Question

I use wordpress as CMS and created a form with the plugin WPCF7 (Contact Form 7). It turns out that some form elements such as select, checkbox and radio button overlap each other in a way that I can’t adjust them. Ver Imagem

With the help of jQuery I can define a z-index value for each element <select> generated by the WPCF7 plugin shortcode, however, they still overlap each other or are superimposed by other form elements such as checkboxes, as we can see in the image.

Even defining a z-index value for the elements <select></select> form with the help of jQuery, they continue to be affected by this effect "overlapping".

Is there a solution in css and/or jQuery that sets the z-index value in a "universal context" for all form elements on a page? Or would this be something related to the WPCF7 plugin?

SOLUTION - Case study:

For those who are experiencing such a situation, just do as mentioned in the answer chosen for this question, i.e., use css to define a z-index value for a given form element.

Regarding the Contact Form 7 plugin, those who use it know that we usually use "shortcodes" to generate the form elements. Thus, following the reasoning of the answer to this question, I solved the problem as follows:

1- Surround the WPCF7 shortcode that represents the form element affected by the problem with a tag <div> and define a class to be handled by css.

Ex.:

<div class="select-profissao">[select* select-profissao id:cd-dropdown class:cd-select "Enfermeiro(a)" "Técnico(a)"]</div>

Where [select* select-professional id:cd-dropdown class:cd-select "Nurse(a)" "Technical(a)"] is the shortcode of the Contact Form 7 plugin responsible for generating the element <select></select>.

the shortcode mentioned above generates the following html markup:

<div class="select-profissao">
<select class="cd-select" id="cd-dropdown">
<option value="-1">EU SOU PROFISSIONAL</option>
<option value="Enfermeiro(a)">Enfermeiro(a)</option>
<option value="Técnico(a)">Técnico(a)</option>
</select>
</div>

2 - Then write the css:

.select-profissao {
z-index: 1000;
position: relative;
} 

Just follow the same structure for other elements <select></select> created with the plugin and adjust the z-index value of each element independently.

Answer 1

You already tried to use this?

<style>
    *{
        z-index: 1000;
     }
</style>