Eu uso o wordpress como CMS e criei um formulário com o plugin WPCF7 (Contact Form 7). Acontece que alguns elementos do formulário tais como select, checkbox e botão de radio se sobrepõeem uns aos outros de uma forma que eu não consigo ajustá-los. Ver Imagem
Com a ajuda do jQuery eu consigo definir um valor z-index para cada elemento <select>
gerado pelo shortcode do plugin WPCF7, contudo, eles ainda ficam sobrepostos uns aos outros ou são sobrepostos por outros elementos de formulário como os checkboxes, como podemos ver na imagem.
Mesmo definindo um valor z-index para os elementos <select></select>
do formulário com a ajuda do jQuery, os mesmos continuam sendo afetados por esse efeito "overlapping".
Existe alguma solução em css e/ou jQuery que defina o valor z-index em um "contexto universal" para todos os elementos de formulário em uma página? Ou seria isso algo relacionado ao plugin WPCF7?
SOLUÇÃO - Estudo do caso:
Aos que estiverem experimentando tal situação, basta fazer como mencionado na resposta escolhida para esta pergunta, ou seja, utilizar css para definir um valor z-index para determinado elemento do formulário.
Em relação ao plugin Contact Form 7, quem o utiliza, sabe que geralmente fazemos uso de "shortcodes" para gerar os elementos do formulário. Dessa forma, seguindo o raciocício da resposta para esta pergunta, resolvi o problema da seguinte maneira:
1- Envolva o shortcode do WPCF7 que representa o elemento de formulário afetado pelo problema com uma tag <div>
e defina uma classe para ser manipulada pelo css.
Ex.:
<div class="select-profissao">[select* select-profissao id:cd-dropdown class:cd-select "Enfermeiro(a)" "Técnico(a)"]</div>
Onde [select* select-profissao id:cd-dropdown class:cd-select "Enfermeiro(a)" "Técnico(a)"] trata-se do shortcode do plugin Contact Form 7 responsável por gerar o elemento <select></select>
.
o shortcode mencionado acima gera a seguinte marcação html:
<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 - Em seguida escreva o css:
.select-profissao {
z-index: 1000;
position: relative;
}
Basta então seguir a mesma estrutura para outros elementos <select></select>
criados com o plugin e ajustar o valor z-index de cada elemento independentemente.