относительное расположение div - PullRequest
1 голос
/ 03 мая 2011

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

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

Ответы [ 5 ]

3 голосов
/ 03 мая 2011

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

Вам необходимо добавить position: relative к элементу, который вы хотитезначения top и left, которые должны быть смещены.

Это может быть ваш form, или это может быть ваш элемент #container / #wrapper.

Смотрите здесьдля деталей и визуального представления: http://css -tricks.com / абсолютное позиционирование внутри-относительное позиционирование /

1 голос
/ 03 мая 2011

Похоже, у вас уже есть ваш ответ.Но я все равно опубликую это.

Простой и короткий пример, который показывает, как выполняется относительное позиционирование по отношению к родителю.

http://jsfiddle.net/EadXw/

0 голосов
/ 03 мая 2011

Убедитесь, что ваш <form> элемент охватывает всю вашу "страницу" и что <div> с кнопками является первым потомком <form>.

Когда вы сделаете это, вы можете добавить правило position:relative к форме и position:absolute к <div> и переместить его с помощью top и left.

Другой вариант - не иметь правила позиции в форме и иметь position:relative в <div>. Это больше совместимо с устройствами iPad и iPhone, которым не нравится абсолютное позиционирование. Когда вы идете на этот подход, убедитесь, что фиксированный height для <div> и отрицательный margin-bottom того же размера.

0 голосов
/ 03 мая 2011

Звучит так, будто вы должны немного прочитать о DOM.

Позиционирование с помощью CSS и HTML

0 голосов
/ 03 мая 2011

Если вы хотите разместить его на странице top:0;left:0, поместите его сразу после тега <body>.

Если он обернут во что-либо, контейнеры могут изменить свою позицию. Убедитесь, что он не зависит от контейнеров.

...