我正在开发一个使用position:relative div 的网站,其中包含position:absolute 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 属性正常工作。在我看来,徽标应该位于页面下方,但它并没有像我认为的那样工作。我不确定我错过了什么。当我将位置更改为静态时它确实有效,但它不能正确保持位置。
定义父级 div 高度,然后在顶部
%
div中使用顶部
absolute
像这样:
.parent {
position: relative;
height: 100px;
}
.child {
position: absolute;
top: 50%;
}
如果您没有定义父级 div 高度,则使用
px value in top
。
.child {
top: 100px;
}
将
width
和 height
添加到 #imagemenu
例如:
#imagemenu {
width: 100%;
height: 400px;
}
然后再次检查
position: absolute
是否工作。
对于具有
height:100vh;
的父 div 包含
position: relative;
CSS
#imagemenu {
position: relative;
height:100vh;
}
.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%;
}