Храните список в позиции, когда страница изменена.

Question

У меня есть список пунктов меню в div фона img. Когда размер браузера изменяется, фоновые изображения и шрифты элементов списка изменяются очень хорошо.

Однако список вскакивает на страницу, чем меньше браузер. Я пробовал позиционировать его на месте, используя проценты и ems безрезультатно. Напротив, есть слайд-шоу на странице, которые делают это отлично, однако, когда я применяю тот же CSS к этому списку, он не может оставаться на месте.

СМЧ на заднем плане:

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

СМЧ в списке:

.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. Вам нужно будет отрегулировать верхнюю позицию g для этого, чтобы он оставался вертикально совмещенным с вашим левым и правым div. Хотя я бы посоветовал, что все это должно быть закодировано другим способом, кроме всего позиционирования и т. Д.