Posición de CSS: absoluta con la posición: relativa "superior" no funciona

Question

Estoy trabajando en un sitio que utiliza la posición: div relativa que contiene la posición: divs absoluta. Entiendo el concepto que creo, y todo funciona bien, excepto que parece que no puedo obtener el atributo top para hacer cualquier cosa. izquierda funciona, pero no arriba. Mi código es el siguiente:

<div id="imagemenu"> 
    <div class="west"> 
     <img src="/makingmusicstore/wp-content/themes/makingmusic/img/west.png" alt="west"> 
    </div> 
    <div class="southwest"> 
     <img src="/makingmusicstore/wp-content/themes/makingmusic/img/southwest.png alt=" southwest "> 
    </div> 
    <div class="south "> 
     <img src="/makingmusicstore/wp-content/themes/makingmusic/img/south.png " alt="south "> 
    </div> 
    <div class="logo "> 
     <img src="/makingmusicstore/wp-content/themes/makingmusic/img/logo.png " alt="Making Music Store "> 
    </div> 
</div> 

CSS

#imagemenu { 
    position: relative; 
} 
.logo img { 
    position: absolute; 
    width: 20%; 
    top: 50%; 
    left: 40%; 
} 
.west img { 
    position: absolute; 
    width: 30%; 
    left: 15%; 
} 
.southwest img { 
    position: absolute; 
    width: 30%; 
    left: 15%; 
} 
.south img { 
    position: absolute; 
    left: 35%; 
} 

El sitio es adams-web.net/makingmusicstore y actualmente es un desastre hasta que pueda obtener el atributo de arriba a trabajar. Me parece que el logotipo debería estar mucho más abajo en la página, pero no está funcionando como creo que debería. No estoy seguro de lo que me estoy perdiendo. Funciona cuando cambio la posición a estática, pero no mantiene la posición correcta.

Answer 1

Hey ahora definir su padre altura div que el utilizado en la parte superior % superior absolutediv

De esta manera:

.parent { 
    position: relative; 
    height: 100px; 
} 
.child { 
    position: absolute; 
    top: 50%; 
} 

Si no se define su altura div padre que se utiliza para px value in top

.child { 
    top: 100px; 
} 

Answer 2

Añadir width y height a #imagemenu

Por ejemplo:

#imagemenu { 
    width: 100%; 
    height: 400px; 
} 

A continuación, compruebe de nuevo si position: absolute está funcionando o no.