2014-10-28 3 views
2

Примечание: У меня нет доступа к JS. Это необходимо сделать с помощью CSS.Как разместить элемент относительно ширины фонового изображения

У меня есть фоновое изображение (850 x 1080), расположенное в правом нижнем углу экрана. У меня есть изображение масштабируется таким образом, что он занимает 38% ширины:

background-position: right bottom; 
background-size: 38% auto; 
background-attachment: fixed; 

Теперь я хочу, чтобы поместить еще один элемент так, что он всегда, независимо от размера экрана, на одной линии с определенной частью фона образ. Как я могу это сделать? Я в настоящее время он установлен на заданном расстоянии от правого и нижнего края, но это не то, что я хочу:

height: 220px; 
width: 155px; 
bottom: 400px; 
right: 400px; 

My code can be found here, а часть я пытаюсь позиции в определении :hover + .hide (строка 12). Страница, которую я пытаюсь настроить, - это мой MyAnimeList profile, где я пытаюсь выровнять обложку с красным красным мечом.

+0

Что-то вроде этого? http://stackoverflow.com/questions/11151089/position-one-element-related-to-another-in-css " –

ответ

2

Поскольку размер фона изменяется в соответствии с шириной его контейнера, вы можете использовать процентный запас, чтобы поместить элемент. Процентная маржа рассчитывается в соответствии с шириной контейнера, даже верхним/нижним пределом (see here).

пример:

:hover + .hide{ 
    position:absolute; 
    bottom:0; 
    right:0; 
    margin-bottom:20%; /* tune this */ 
    margin-right:20%; /* tune this */ 
} 

Вот DEMO

+0

Есть ли способ сделать нижнюю границу поля зависимой от поля справа, так как у меня есть высота фона установлена ​​на авто? – Eunkai

+1

@Wyverncloak, как я сказал в этом ответе, маржа внизу и справа вычисляется в соответствии с шириной котайнера, так что, например, вы установили их как '20%', они оба будут такое же значение в 'px' рассчитывается в соответствии с шириной родительского элемента. –

+0

Я понимаю этот бит, я имел в виду, если бы я хотел, чтобы margin-bottom был в 1,2 раза больше, чем правое правое, было в пикселях. Если margin-right: 20% вышел на 100px для этого экрана, я хочу сделать margin-bottom 120px. – Eunkai

Смежные вопросы