problemas com sistema de abas em jQuery

[Hugo Borges_120734 6]

Galera montei um sistema de abas, bem simples usando jquey. Porem estou com um bug e não sei como resolver.

 

Quanto a 1º abas e maior do que a segunda, e possível clicar em campos input que ficam nela. Ou seja mesmo estando na aba 2 e não dando para ver o input é possível clicar nele .

 

Exemplo na foto abaixo:

 

 

O código esta aqui:

https://jsfiddle.net/hugoborges/q56q5koj/2/

 

Se alguém puder me ajudar fico muito grato.

[William Bruno 1501]

Uma forma de corrigir é forçando a altura:

 

<div class="tab">

.tab { height: 100%; }

[Hugo Borges_120734 6]

bom tentei usa ideia, mas o conteúdo sai da aba. olha só:

 

https://jsfiddle.net/hugoborges/q56q5koj/3/

[andrealoisio 1]

https://jsfiddle.net/q56q5koj/5/

 

Dando uma fuçada aqui troquei isso:

 

input.tabs:checked + label + div {

opacity: 1;

z-index: 1;

}

por isso:

input.tabs + label + div {

z-index: -1;

}

input.tabs:checked + label + div {

opacity: 1;

z-index: 1;

}

[Hugo Borges_120734 6]

amigo, vlw funcionou 100%