php - 如何将页脚中回显的 <div> float 到位于其他位置的 <div> 上 (PHP/jQuery/HTML/CSS)

Question

我正在着手一个重大元素，但一开始就陷入了一个小问题。我会尽量简洁。

我有一个 PHP 脚本，它将回显到页面的页脚(</body></html> 之前的最后一个内容，一堆包含可见按钮的 <div> 和包含隐藏对话框的 <div> 。

计划是让按钮 float 在相应的<div>的右上角。位于页面的主要内容区域。即 - 回显到页脚的 Button-1 将 float 在 content-box-1 的 Angular 落，并将绑定(bind)到隐藏的 <div> “对话框-1”。

我将在整个页面中使用 jQuery 和 jQuery UI 对话框。我不确定这是否与这个问题特别相关，但认为值得一提以防万一。

简单地说，我的问题是如何回显 <div class="button">Button 1</div>使用 PHP 进入页脚，但让它 float 在 <div class=content>Content 1 is full of content</div> 的右上角(可能有 5px 边距) ？

一张图说一千个字:

如上所示，我想要内容片段 Angular 落里的蓝色小齿轮按钮，锁定并加载隐藏的 <div>包含对话框。 我找到了大量关于如何将 div float 在 div 之上的信息，但我看到的所有示例都显示 <div>在页面源中彼此非常接近；两者之间没有一百行源代码<div>

我不确定解决方案是纯 CSS、纯 jQuery/jQueryUI 还是两者的组合。

任何建议将不胜感激。

谢谢!

Answer 1

您需要将 float 位置设置为:

position:absolute;

然后将div的左侧和顶部设置到“齿轮”附近的某个位置，您可以通过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 如此接近“齿轮”的原因是因为它们使用了position:relative齿轮，然后绝对定位对话框。

当一个元素在已经相对或绝对定位的元素内进行绝对定位时，它现在相对于其父元素而不是窗口元素定位

对话框相对于 #gear div 左上角 10 像素:

<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"))