從頁面頂部的文檔末尾放置一個元素

我在</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

從頁面頂部的文檔末尾放置一個元素

回答

相關問題