CSS 位置：绝对位置：相对“顶部”不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11928294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS position: absolute with position: relative "top" not working
提问by Rob Adams
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 topattribute to do anything. left works, but not top. My code is as follows:
我正在使用位置：相对 div 包含位置：绝对 div 的网站上工作。我理解我所相信的概念，并且一切都很好，除了我似乎无法获得top做任何事情的属性。left 作品，但不是顶部。我的代码如下：
<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
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.
该网站是 adams-web.net/makingmusicstore，目前很混乱，直到我可以让 top 属性起作用。在我看来，标志应该在页面的更远的地方，但它并没有像我认为的那样工作。我不确定我错过了什么。当我将位置更改为静态时它确实有效，但它没有正确保持位置。
回答by Rohit Azad
Hey now define your parent div heightthan used top %in top absolutediv
嘿，现在定义您的父div 高度，而不是%在 top div 中使用的 topabsolute
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
如果你没有定义你的父 div 高度比以前 px value in top
.child {
top: 100px;
}
回答by Zendy
Add widthand heightto #imagemenu
添加width和height到#imagemenu
For example:
例如：
#imagemenu {
width: 100%;
height: 400px;
}
Then check again if position: absoluteis working or not.
然后再次检查是否position: absolute正常工作。
