Tengo un problema que está causando muchísimos quebraderos de cabeza. Tengo que decir que soy autodidacta y que a pesar de que llevo mas de 5 años diseñando páginas web y aprendiendo sobre la marcha nunca me había encontrado este problema.
La idea es colocar un div
con posición absolute
por encima de su padre y los padres de este usando el valor de z-index
. Lo he hecho otras veces y no hay problema, simplemente se le dan unos valores a top
y left
para hacer que el div
en cuestión se desplace por encima del padre. Pues bien, en este caso no funciona, se queda oculto dentro del padre como en la siguiente imagen.
Tengo entendido que este problema estaba causado por no posicionar los div
padre, pero he probado de todas las maneras posibles. Necesito que alguien con mas conocimientos me diga donde está el fallo. Aquí dejo el código:
.mainwidth{
max-width: 1439px;
margin: auto;
}
#main-myprofile{
overflow: auto;
margin-top: 100px;
position: relative;
z-index: 4999;!important
}
#cuadro-panel{
width: 100%;
overflow: auto;
border-radius: 2px;
z-index: 5000;!important
position: relative;
top: 0px;
left: 0px;
}
#menu-user-panel{
float: left;
background-color: #EFEFFF;
width: 19%;
position: relative;
top: 20px;
z-index: 5001;!important
}
#load-options-panel{
float: right;
background-color: #EFEFFF;
width: 80%;
position: relative;
top: 0px;
display: block;
z-index: 5002;!important
}
#cabecera-panel{
width: 100%;
background-color: #EFEFFF;
position: relative;
border-bottom: 4px solid #B9B9FF;
overflow: auto;
height: 80px;
z-index: 5003;!important
}
#pic-usuario-panel{
width: 20%;
height: 80px;
overflow: hidden;
position: relative;
z-index: 5004;!important
}
#preview-user-panel{
border-radius: 50%;
width: 50%;
position: absolute;
border: 6px solid #B9B9FF;
top: -40%;
left: 25%;
z-index: 9999;!important
}
<div class="mainwidth" id="main-myprofile">
<div id="cuadro-panel">
<div id="cabecera-panel">
<div id="pic-usuario-panel">
<img src="<?=$rowUser["foto"]?>" alt="" id="preview-user-panel">
</div>
</div>
<div id="menu-user-panel">
a
</div>
<div id="load-options-panel">
b<br><br><br><br><br><br>
</div>
</div>
</div>