2

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.

position absolute nor working

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>

1 respuesta 1

0

Comenté algunas lineas de tu CSS para lograr el efecto que quieres y eliminé !important ya que lo tenías declarado después del punto y coma (debe ser antes de cerrar con punto y coma).

Comenté la propiedad overflow ya que es la que se encarga de recortar tu contenido al sobrepasar las dimensiones del contenedor... De acuerdo a la definición de w3school :

La propiedad overflow especifica qué debería suceder si el contenido desborda el cuadro de un elemento.

Esta propiedad especifica si se debe recortar el contenido o agregar barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en un área específica.

.mainwidth{
	max-width: 1439px;
	margin: auto;
}
#main-myprofile{
	/*overflow: auto;*/
	margin-top: 100px;
	position: relative;
	z-index: 4999;
}
#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;
}
#load-options-panel{
	float: right;
	background-color: #EFEFFF;
	width: 80%;
	position: relative;
	top: 0px;
	display: block;
	z-index: 5002;
}
#cabecera-panel{
	width: 100%;
	background-color: #EFEFFF;
	/*position: relative;*/
	border-bottom: 4px solid #B9B9FF;
	overflow: auto;
	height: 80px;
	z-index: 5003;
}
#pic-usuario-panel{
	width: 20%;
	height: 80px;
	/*overflow: hidden;*/
	position: absolute;
	z-index: 5004;
}
#preview-user-panel{
	border-radius: 50%;
	width: 50%;
	position: absolute;
	border: 6px solid #B9B9FF;
	top: -40%;
	left: 25%;
	z-index: 9999;
}
<div class="mainwidth" id="main-myprofile">
   <div id="cuadro-panel">
      <div id="cabecera-panel">
          <div id="pic-usuario-panel">
            <img src="https://picsum.photos/200/200" 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>

1
  • Sublime! Simplemente estaba en la combinación de los overflow correcta! Gracias gracias gracias! Commented el 16 nov. 2019 a las 18:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.