Menu
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.
769
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.
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.
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.
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.
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;
}
Add width and height to #imagemenu
For example:
#imagemenu {
width: 100%;
height: 400px;
}
Then check again if position: absolute is working or not.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
