Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 769
Rob Adams Avatar asked Aug 13 '12 04:08

Rob Adams


People also ask

Why is position Absolute not working CSS?

In your code, none of the ancestors are "positioned" elements, so the div is offset from body element, which is the offsetParent . The solution is to apply position:relative to the parent div, which forces it to become a positioned element and the child's offsetParent . Save this answer.

Why is top not working CSS?

To answer your question why top: 50% is not working, when you use property top on an element, the parent of that element needs to have a static height set in place. This should be in px or a unit other than percent.

Why is my Z Index not working?

You set z-index on a static element By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.

How do you position relative and absolute?

Relative - the element is positioned relative to its normal position. Absolute - the element is positioned absolutely to its first positioned parent. Fixed - the element is positioned related to the browser window. Sticky - the element is positioned based on the user's scroll position.


2 Answers

Hey now define your parent div height than used 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 than used to px value in top

.child {
    top: 100px;
}
like image 99
Rohit Azad Malik Avatar answered Oct 24 '22 11:10

Rohit Azad Malik


Add width and height to #imagemenu

For example:

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

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

like image 22
Zendy Avatar answered Oct 24 '22 11:10

Zendy