web-dev-qa-db-ja.com

CSS位置：絶対位置と位置：相対「トップ」が機能しない

私はposition：relative divを含むposition：absolutedivを使用するサイトで作業しています。私は自分が信じている概念を理解しており、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属性を機能させることができるまで混乱しています。ロゴはページのはるか下にあるはずですが、私が信じているように機能していません。何が欠けているのかわかりません。位置を静的に変更すると機能しますが、位置が正しく保持されません。

csscss-position
8
Rob Adams

親を定義しますdiv height使用されているtop % in top absolutediv

このような：

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

px value in topに使用されるよりも親のdivの高さを定義しない場合

.child {
    top: 100px;
}
14
Rohit Azad

widthとheightを#imagemenuに追加します

例えば：

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

次に、position: absoluteが機能しているかどうかをもう一度確認します。

6
Zendy