Question

我在背景img的div中有一个菜单项列表。调整浏览器大小后，背景图像和列表项的字体可以很好地调整大小。

但是，如果浏览器变小，列表会跳转到页面。我已经尝试使用百分比和ems来定位它无济于事。很明显，页面上的幻灯片显示完美，但是当我将相同的CSS应用于此列表时，它无法保持原位。

背景上的CSS是：

.homepage-banner {
position: relative;
max-width: 95.949em;
margin-left: auto;
margin-right: auto;
margin-bottom: 3.631em;
display: block;
}

列表上的CSS是：

.Categories {
width: 33.333%;
position: relative;
z-index: 1000;
float: left;
top: -10em;
}

.Categories:after {
padding-top: 56.25%;
/* 16:9 ratio */
display: block;
content: '';
}

.Cat_header {
color: #44E86A;
text-shadow: 1px 1px 1px #000;
font: inherit;
font-weight: bolder;
font-size: 2.6vmax;
line-height: 3vmax;
}

.Cat_menu {
position: absolute;
text-align: center;
right: -20%;
left: 20%;
bottom: 0%;
top:0%;
color: #44E86A;
text-shadow: 1px 1px 1px rgba(42, 151, 210, 0.65);
}

您可以在http://ragdivers.com/Ragdivers/上查看该页面。该列表位于背景图像的底部中心，称为“产品类别”。

任何帮助都会非常感激，因为我几周来一直在努力。

Answer 1

看起来是因为您没有像在custom.css中左右那样继续在媒体查询部分进行顶部定位调整。所以你的左右调整为5.5em，但你的类别div仍然保持在-10em。您需要调整顶部位置以使其与左右div保持垂直对齐。虽然我建议这应该以不同的方式编码，而不是所有的定位等。

调整页面大小时将列表保持在适当位置

1 个答案: