Quería utilizar un código que vi en Youtube "Como hacer un Menú de Navegación con Tabs" (https://www.youtube.com/watch?v=Xh94Osf1hvU&t=191s). Pero al momento de crear el menú utilizan position absolute y relative (CREO que ese es el problema). Lo que pasa es que el contenido se sobrepone al footer por ejemplo.
Ese es el error que se me presenta, es como si el menú no identificará que debajo de él existen elementos, y no sé como solucionarlo.
Me gustaría saber si hay alguna manera de solucionar ese error, lo agradecería de antemano.
HTML
<div class="container">
<div class="lbl-menu">
<label for="radio1">Inicio</label>
<label for="radio2">Servicio</label>
</div>
<div class="content">
<input type="radio" name="radio" id="radio1" checked/>
<div class="tab1">
<h2>Inicio</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum et
atque corrupti repellat beatae facere tempore mollitia ducimus
nulla laudantium eveniet, provident debitis. Fugit nisi minus
laborum delectus autem esse.
</p>
</div>
<input type="radio" name="radio" id="radio2" />
<div class="tab2">
<h2>Servicio</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum et
atque corrupti repellat beatae facere tempore mollitia ducimus
nulla laudantium eveniet, provident debitis. Fugit nisi minus
laborum delectus autem esse.
</p>
</div>
</div>
</div>
CSS
.container{
width: 100%; /* Ocupe el 100% del ancho */
max-width: 700px;
margin: auto; /* Centrado en el medio de la pagina */
margin-top: 100px;/* Separacion con el borde superior */
}
.lbl-menu{
background-color: #234; /* Color de fondo del Menu donde estan los label (Inicio y
Servicio) */
}
.lbl-menu label{
display: inline-block;
padding: 20px; /* Espaciado interno de los label */
color: white;
cursor: pointer;
transition: all 400ms ease;
}
.lbl-menu label:hover{
background: #28435d;
}
.content{
position: relative;/* Despues colocaremos que nuestro contenido interno este
absoluto, y asi siempre quede dentro del contenedor padre */
}
.content div{
position: absolute;
line-height: 1.8;
transition: all 600ms ease;
opacity: 0; /* Para que por defecto no aparezca ninguno */
visibility: hidden; /* Para ocultarlo */
transform: scale(0.90);
padding: 30px;
background-color:#fff;
padding-bottom: 40px;
}
#radio1, #radio2{
display: none;
}
#radio1:checked ~ .tab1, #radio2:checked ~ .tab2{
opacity: 1; /* Cuando damos clic en algun Label, que aparezca la informacion */
visibility: visible;
transform: scale(1);
}