Tabs sobrepondo o resto do conteúdo

[mruoppolo 14]

Olá, tudo bem?

Estou com um probleminha aqui com o CSS, já descobri que o problema é o position:absolute, mas não sei pelo que posso substituí-lo.

Eu tenho a seguinte tab:

HTML

<div class="tabs-container">

    <!-- ABA 1 -->
    <input type="radio" name="tabs" class="tabs" id="tab1" checked>
    <label for="tab1">Configurações Gerais</label>
    <div class="tab-content">
        ABA 1        
    </div>
    
    <!-- ABA 2 -->
    <input type="radio" name="tabs" class="tabs" id="tab2">
    <label for="tab2">Página de Conteúdo Restrito</label>
    <div class="tab-content">
      ABA 2
    </div>
    
    <!-- ABA 3 -->
    <input type="radio" name="tabs" class="tabs" id="tab3">
    <label for="tab3">Suporte</label>
    <div class="tab-content">
      ABA 3
    </div>
</div>

CSS

.tabs-container {
    position: relative;
    max-width: 98%;
    margin: 10px auto;
}
.tabs-container p {
    margin: 0;
    padding: 0;
}
.tabs-container:after {
    content: '.';
    display: block;
    clear: both;
    height: 0;
    font-size: 0;
    line-height: 0;
    visibility: none;
}

.tab-content { 
    color: #444444;
    border: 1px solid #9CBC44;
}

.clear {
    clear: both;
}

/* ABAS */
input.tabs {
    display: none;
}
input.tabs + label + div {
    width: 98%;
    opacity: 0;
    position: absolute;
    background: #eee;
    top: 40px;
    left: 0;
    padding: 10px;
    z-index: -1;
    transition: opacity ease-in-out .3s;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
input.tabs:checked + label + div {
    opacity: 1;
    z-index: 1000;
}
 
/* Labels */
input.tabs + label {
    line-height: 40px;
    padding: 0 20px;
    float: left;
    background: #444;
    color: #fff;
    cursor: pointer;
    transition: background ease-in-out .3s;
}
input.tabs:checked + label {
    background: #9CBC44;
    color: #fff;
}

E bem ali no: input.tabs + label + div eu tenho uma position absolute e isso esta fazendo a div passar por cima de todo o footer da página, porém qualquer coisa que eu utilizo para substituir, por exemplo, se eu colocar position relative, o topo das tabs, que neste caso não inputs, vai para a parte de baixo da tab totalmente desorganizado.

Como eu poderia resolver isto?

Muito obrigado :D