CSS position: absolute with position: relative "top" not working

Question

I'm working on a site that uses position: relative div containing position: absolute divs. I understand the concept I believe, and everything works great except I cannot seem to get the top attribute to do anything. left works, but not top. My code is as follows:

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

The site is adams-web.net/makingmusicstore and is currently a mess until I can get the top attribute to work. It seems to me that the logo should be much further down the page, but it is not working as I believe it should. I'm not sure what I'm missing. It does work when I change the position to static, but it doesn't keep the position correctly.

Sabina

You never got the website up? I went to check it to see what you did but. Did you take it down or not get it working? – Middleman

Answer 1

Define your parent div height, and then use top % in top absolute div

Like this:

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

If you don't define your parent div height then use px value in top.

.child {
    top: 100px;
}

Sisal

Of course! Thanks for your response, I worked on this for a very long time, and the answer was so easy. – Sabina

Answer 2

Add width and height to #imagemenu

For example:

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

Then check again if position: absolute is working or not.

Rabideau

Answer 3

Include height:100vh; for the parent div having position: relative;

CSS

#imagemenu {
    position: relative;
    height:100vh;
}
.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%;
}

Girondist