tengo una problema para diseñar las pestañas del Section en el Home de una Web que estoy desarrollando.
Pese a que tengo establecido el contenedor con posición relativa, las cajas con posición absoluta siguen tomando como referencia el ancho y alto de la propia página, pero no el de su contenedor.
Paso captura y fragmento del código. Seguro es una tontería, pero no logro dar con la solución.
--CÓDIGO-- /He probado a dejar como posición relative únicamente el contenedor de las cajas que se posicionan absolute, y también (como muestra el siguiente código) dejando los contenedores padre como relative, pero sin ningún resultado./
A continuación se detalla el código del archivo .CSS
/*SECTION*/
/*Este bloque es el contenedor del propio section de la página (a section no le he definido ningún estilo css)*/
.contenedorSection{
width: 90%; height: 880px;
position: relative;
margin-left: auto; margin-right: auto;
border: 2px solid black;
}
/*Este bloque es el contenedor de los div que sirven como pestañas del Section*/
.contPestanasSect{
width: 100%; height: 880px;
**position: relative;**
}
/*Esta clase define a las pestañas del section, que son también div que continen etiqueta p*/
.pestSect{
width: 200px; height: 100px;
**position: absolute;**
/*define la posicion del texto*/
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
/*define el borde*/
border: 2px solid #1CD7DF;
}
/*los id que determinan la posición de cada pestaña dentro del section (en el caso de #a lo he dejado al 100% para que se vea claramente que sobrepasa el borde de su contenedor*/
#a{
top: 40%; left: 100%;
}
#b{
top: 60%; left: 65%;
}
#c{
top: 40%; left: 45%;
}
#d{
width: 240px;
top: 60%; left: 25%;
}
#e{
top: 40%; left: 5%;
}
A Continuación paso la estructura del archivo HTML
<!--BLOQUE SECTION-->
<div class="contenedorSection">
<section>
<div class="contPestanasSect">
<div class="pestSect" id="a"><p class="fuenteSection">ANALISIS</p></div>
<div class="pestSect" id="b"><p class="fuenteSection">NONSTOP</p></div>
<div class="pestSect" id="c"><p class="fuenteSection">PAJAS MENTALES</p></div>
<div class="pestSect" id="d"><p class="fuenteSection">MISCELANEAS</p></div>
<div class="pestSect" id="e"><p class="fuenteSection">CANDY-SHOP</p></div>
</div>
</section>
</div>
Espero puedan ayudarme. Un saludo.