Question

我在文档的div标记之前（文档结束之前）有一个</body>。我想使用CSS或JavaScript在页面顶部显示这个div。

我知道position:absolute;。问题是如果我使用它，div将显示在位于顶部的其他内容之上，而不是在此内容之前。

还有其他方法吗？

Answer 1

您可以对div元素使用 position：absolute ，然后将 margin-top 指定给body元素，该元素等于div的可能高度。

Answer 2

我不相信有一种方法可以彻底重新定位元素，同时将其保持在内联流中。正如您已经提到的，绝对定位会从内联流中删除元素 - 从而与其他内容重叠。

但是，您可以使用Jquery克隆内容，并将其附加到顶部附近。您还可以查询div的高度，并使用Jquery设置正文的上边距。

这两个都允许它尊重内联流，但它不是使用CSS，因为你的问题是指;如果你愿意，我可以帮助Jquery。

修改

<script type="text/javascript"> window.onload = function() { document.getElementById("content").style.marginTop = document.getElementById("errorDisplay").offsetHeight + "px"; } </script>

我在jsfiddle玩这个 - 它实际上表现得很奇怪......但它绝对接近于工作。我正在使用wrapper和content而不是操纵整个身体（我认为只是更安全一些。）确保在命令末尾添加+ "px"，否则它赢了不行。

这是小提琴......

http://jsfiddle.net/pVn2W/

正如你所看到的，它正在推动整个包装而不仅仅是'内容'......在第一个参数中使用'content'或'wrapper'并没有奇怪地改变任何东西。

不完全是你的模特，但仍然是实现同一目标的练习 - 也许这会让你更近一步：P

Answer 3

Cybernate回答的另一种方法是使用 position：fixed 来执行此操作。

然而，即使在滚动时，此div也将始终位于顶部。这对于“通知”栏很有用，但如果你把它用于错误的东西会很烦人：）

Answer 4

如果使用JavaScript是一个选项，您只需执行此操作：

// For demonstration I am creating a <div id="mydiv">Hello World</div>
// Appending it to <body> means it goes to the very bottom of the body tag
var div = document.createElement("div");
div.id="mydiv";
div.innerHTML = "Hello World";
document.getElementsByTagName("body")[0].appendChild(div);
// In your case I assume that the div is already present inside the HTML source
// just before </body>, So no need to do the above
document.getElementsByTagName("body")[0].insertBefore(
    document.getElementById("mydiv"),
    document.getElementsByTagName("body")[0].firstChild
);

将以上代码复制粘贴到控制台中进行演示。如果你正在使用jQuery，上面提到的代码可以简化为一行。

将文档末尾的元素放在页面顶部

4 个答案: