Как я могу расположить вправо абсолют, если страница больше ширины, чем мой экран? - PullRequest
Новая
       1

Как я могу расположить вправо абсолют, если страница больше ширины, чем мой экран?

0 голосов
/ 01 декабря 2011

Я хочу расположить элемент в самом правом углу страницы.

Я попробовал это на Firefox 8, но это неправильно: 

<!DOCTYPE html>
<html>
<body style="min-width:2000px;background-color:#222">
<div id="a" style="position:absolute;right:0;width:200px;background-color:#eee">this should be on the right, even if you scroll right</div>
<div style="width:100%">this is just to adjust the page to max width</div>
</body>
</html>

, который будет располагать ее справа от видимой части моего экрана, но моя страница будет шире, поэтому, если я прокручиваю вправо, div a больше не находится справа, но имеет пробел справа, это пространство, которое не было видно при загрузке страницы

Я хочу, чтобы он располагался действительно правильно из содержимого страницы (не из видимой части ) так что, если я не прокручиваю вправо, то это должно быть за пределами видимой области

Ответы [ 3 ]

1 голос
/ 01 декабря 2011

Попробуйте указать position: relative; вашему телу.

Редактировать : Это очень хороший справочный сайт для изучения позиционирования CSS: Изучение позиционирования CSS за 10 шагов

1 голос
/ 01 декабря 2011 
<!DOCTYPE html>
<html>
<body style="min-width:2000px;background-color:#222; position: absolute;">
<div id="a" style="position:absolute; right: 0; width:200px; background-color:#eee">this should be on the right, even if you scroll right</div>
<div style="width:100%; ">this is just to adjust the page to max width</div>
</body>
</html>

Установка абсолюта на теле должна это исправить. http://jsfiddle.net/JXgk9/3/

1 голос
/ 01 декабря 2011

Измените position: absolute на position: fixed, и оно останется фиксированным в этом месте, независимо от прокрутки в любом направлении.

Обновление

Извините, мой плохой - не совсемпоймите ваш вопрос.
Если вы хотите, чтобы он располагался полностью справа от тела, вам нужно всего лишь добавить position: relative; к вашему тегу <body> , и поведение будетто, что вы ищете.

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

...