在網頁中推送內容

Question

我將一個div浮動到窗口的頂部。但是，它覆蓋了頁面頂部的內容，也就是說，它不會壓低頁面的頂部。然而，我看到Stack Overflow在通知欄上這樣做，因爲它沒有覆蓋用戶名/代表/鏈接。有沒有我可以用CSS複製這種方法？

Answer 1

您可以將外部容器對象的上邊距設置爲浮動div的高度：

<div id="outerContainer"> 
    ... page content goes here ... 
</div> 

<div id="floatingNotification"> 

</div> 

然後在CSS：

#floatingNotification 
{ 
    ... 
    height: 20px; 
} 

#outerContainer 
{ 
    margin-top: 20px; 
} 

Answer 2

在堆棧溢出的情況下，我認爲他們很有可能使用jQuery來操縱頁面內容。我還沒有探索的鏈接腳本，我也沒有得到任何通知，檢查着，但我大膽猜測，它是這樣的：

$(document).ready(
    function() { 
     var element = '<div id="notification"></div>'; 
     var text = '<p>The text to show in the notification thingumabob.</p>'; 

     $('div#wrap').prepend(element).find('#notification').prepend(text).css('display','none'); 
     if ('#notification') { 
      $('div#notification').slideDown('slow'); 
     } 
    } 
) 

請注意，我是令人難以置信的新jQuery - 坦率地說，JavaScript一般 - 所以我有很多機會提出了一些可怕的錯誤。但是，經過測試，這個概念起作用。即使您想要添加的element已浮動或絕對定位，slideDown()似乎會處理移動頁面內容以避免覆蓋其他元素。不過，這可能會，也可能不會，但在我的設置中可能會有一些巧合。

Answer 3

答案取決於您是使用相對還是絕對定位的浮點數。如果它是絕對的，則將float div設置爲例如{top：20px;}。如果它是相對的，請使用填充頂部，邊距頂部（或頂部元素的邊緣底部）。

在普通瀏覽器中哪些功能最好取決於整體情況。