从页面顶部的文档末尾放置一个元素

我在</body>文档的标签（文档结束之前）之前有一个div。我想使用CSS或JavaScript在页面顶部显示此div。从页面顶部的文档末尾放置一个元素

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

那么还有其他方法可以做到吗？

2011-01-27 Alex

@Alex：也许我不完全明白，但为什么你不把它放在开头？ – 2011-01-27 08:24:30

因为该分区是用于调试目的，它的内容可以改变，直到整个文档完成显示... – Alex 2011-01-27 08:25:41

@Alex：你一定要明白，你可以在任何地方在页面上的HTML源代码显示的任何元素，无论其流的位置？而对于这样的信息分支机构来说，'position：fixed; top：0;`似乎是完美的。而且他们并不需要被视为第一个“身体”的孩子。 – 2011-01-27 08:31:44

您可以使用位置：绝对 DIV元素，然后分配一个边距到body元素它等于div的可能高度。

来源

2011-01-27 08:13:17 Chandu

我不认为有一种方法可以大幅度重新定位元素，同时将其保持在内联流程中。正如您已经提到的那样，绝对定位将内联流中的元素删除 - 从而与其他内容重叠。

然而，您可以使用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/

正如你所看到的，它推动了整个包装下来，而不是仅仅“内容” ......用在“内容”或“包装”第一个论据不会奇怪地改变任何事情。

不完全是你的模型，但仍实现相同目标的运动 - 也许这将让你更近了一步：P

来源

2011-01-27 08:17:42 jlmakes

的替代Cybernate的答案是使用位置：固定做到这一点。

然而，这个div即使在滚动时也会始终处于顶端。如果你使用它的错误类型的东西:)这是伟大的一个“通知”栏，但刺激性

来源

2011-01-27 08:17:43

如果使用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，上面提到的代码可以简化为一行。

来源

2011-01-27 08:32:15

从页面顶部的文档末尾放置一个元素

回答

相关问题