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

【问题标题】：Keep list in position when page is resized调整页面大小时将列表保持在原位
【发布时间】：2015-05-08 02:43:15
【问题描述】：

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

但是，浏览器变得越小，列表就会跳到页面上。我尝试使用百分比和 em 将其定位在适当的位置，但无济于事。顺便说一句，页面上的幻灯片可以完美地做到这一点，但是当我将相同的 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/ 上查看该页面。该列表位于名为“产品类别”的背景图片的底部中心。

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

【问题讨论】：

标签： css wordpress woocommerce wordpress-theming woothemes

【解决方案1】：

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

【讨论】：