Как разместить <div>в нижнем колонтитуле над <div>, расположенным в другом месте (PHP / jQuery / HTML / CSS)

Question

Я начинаю крупный проект, но застрял в крошечной проблеме в самом начале. Я постараюсь быть максимально кратким.

У меня есть PHP-скрипт, который будет отображаться в нижнем колонтитуле страницы (последний материал перед </body></html> связкой <div> с видимыми кнопками и <div> с скрытыми диалоговыми окнами.

План состоит в том, чтобы кнопки плавали в верхнем правом углу соответствующих <div> s в основной области содержимого страницы. то есть - кнопка-1, отраженная в нижнем колонтитуле, будет плавать в углу поля содержимого-1 и будет привязана к скрытому <div> 'диалогу-1'.

Я буду использовать диалоги JQuery и JQuery UI на всех страницах. Я не уверен, что это особенно относится к этому вопросу, но подумал, что стоит упомянуть на всякий случай.

Итак, мой вопрос, проще говоря, как мне вставить <div class="button">Button 1</div> в нижний колонтитул с помощью PHP, но сделать так, чтобы он плавал в верхнем правом углу (возможно с полем в 5px) <div class=content>Content 1 is full of content</div>?

На картинке написано тысяча слов:

Как показано выше, я хочу, чтобы маленькие синие кнопки передач в углу фрагментов контента были заблокированы и загружены скрытыми <div> s, содержащими диалоговые окна. Я нашел много информации о том, как разместить div над вершиной div, но все примеры, которые я видел, показывали <div> в непосредственной близости друг к другу в источнике страницы; не с сотней строк исходного кода между двумя <div> с

Я не уверен, является ли решение чистым CSS, чистым jQuery / jQueryUI или их комбинацией.

Любой совет будет высоко ценится.

Спасибо!

Answer 1

Вы хотите установить позицию плавающего в:

position:absolute;

Затем установите левую и верхнюю часть div в какое-то место рядом с «gear», вы можете получить позицию из метода position.

var node = $('#gear');
var position = node.position();
var dialog = $("#dialog");
dialog.css("left", position.left);
dialog.css("top", position.top);
dialog.fadeIn("fast");

Нечто подобное может сработать.

Редактировать: Это имеет некоторые недостатки, после изменения размера диалоговое окно будет не в своей позиции, причина, по которой вы видите исходный div так близко к 'gear', потому что они используют положение: относительно передач, а затем позиционировать диалог абсолютно.

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

Диалог располагается на 10 пикселей относительно верхнего левого угла #gear div:

<div style="position:relative" id="gear">
  <div style="position:absolute;top:10px;left:10px" id="dialog"></div>
</div>

Диалог расположен относительно верхнего левого угла окна:

<div id="gear">
  <div style="position:absolute;top:10px;left:10px" id="dialog"></div>
</div>

Вероятно, нет причин не перемещать диалог в положение на шестерне до его отображения, просто добавьте диалог на шестерне, $ ("# gear"). Append ($ ("# dialog"))