Позиция CSS :абсолютная с позицией :относительной «верхней» не работает

Я работаю над сайтом, который использует позицию :относительный div, содержащий позицию :абсолютные div. Я понимаю концепцию, в которую верю, и все отлично работает, за исключением того, что я не могу заставить атрибут topчто-либо делать. левый работает, а верхний нет. Мой код выглядит следующим образом:

<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%;
}

Сайт adams -web.net/makingmusicstore и в настоящее время беспорядок, пока я не могу заставить работать верхний атрибут. Мне кажется, что логотип должен быть намного дальше по странице, но он не работает так, как должен. Я не уверен, что мне не хватает. Это работает, когда я меняю положение на статическое, но оно не сохраняет положение правильно.