调整页面大小时保持列表在原位

Question

我在背景图片的 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/上查看页面。该列表位于名为 'Product Categories'.

的背景图像的底部中央

任何帮助将不胜感激，因为我已经为此苦苦挣扎了数周。

Answer 1

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

调整页面大小时保持列表在原位

Keep list in position when page is resized

css

wordpress

woocommerce

wordpress-theming

woothemes