CSS位置：绝对位置：相对“顶部”不起作用答案

【问题标题】：CSS position: absolute with position: relative "top" not workingCSS位置：绝对位置：相对“顶部”不起作用
【发布时间】：2014-07-30 21:26:26
【问题描述】：

我正在使用位置：相对 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，目前一团糟，直到我可以让 top 属性正常工作。在我看来，徽标应该位于页面下方，但它并没有像我认为的那样工作。我不确定我错过了什么。当我将位置更改为静态时它确实有效，但它不能正确保持位置。

【问题讨论】：

您从未启动过网站？我去检查它，看看你做了什么，但是。你把它取下来还是没有让它工作？

标签： css css-position

【解决方案1】：

嘿，现在定义你的父 div 高度，而不是使用 top % in top absolute div

像这样：

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

如果你没有定义你的父 div 高度而不是使用 px value in top

.child {
    top: 100px;
}

【讨论】：

当然！感谢您的回复，我为此工作了很长时间，答案很简单。

【解决方案2】：

将width 和height 添加到#imagemenu

例如：

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

然后再次检查position: absolute 是否正常工作。

【讨论】：