將「填充」添加到div的外部？

我真的不知道如何說出這個問題，但這裏有...我的網頁頂部有一個導航欄，位置爲「固定」，因此即使我滾動，它也會保持在頂部下。不過，每當我向下滾動時，我都有一個框可以容納與此導航欄重疊的所有文本/博客。將「填充」添加到div的外部？

有沒有一種方法可以「刪除」盒子的幾個像素（保存我所有東西的那個像素），以便導航欄不會與它重疊？我很抱歉，如果這是令人困惑的，但就像我說的，我不知道該怎麼說。

截圖：
當我不滾動向下
當我（重疊） -

所以我想擺脫我的內容容器的重疊區域的（也許5px以下）。

來源

2012-02-21 Isaiah Bugarin

請您可以顯示截圖嗎？ – Ryan 2012-02-21 01:39:12

「外部填充」被稱爲「邊距」，並且css支持它。如果有幫助，您也可以使用負邊距。 – mpen 2012-02-21 01:39:21

另外，請顯示相關的html和css代碼片段。我在我的答案中發佈了一些猜測，但是如果您顯示實際的代碼，那麼幫助您會更容易。 – 2012-02-21 01:45:25

其他的答案是當場上。我會檢查邊距和溢出設置。

如果div具有絕對定位，相對定位或固定定位，那麼您也可以使用z-index。

z-index的值越高，元素的堆棧越高。因此，z索引爲2的元素將顯示在z索引爲1的元素的前面。

來源

2012-02-21 01:47:41 NathanS

這將工作，但我的divs具有透明度。我張貼了一些截圖。 – 2012-02-21 02:01:36

-1

或者，如果你正在使用position然後你可以使用top: #px;和left: #px

來源

2012-02-21 01:41:51

我知道如何設置位置，我只想知道如何「填充」導航欄的外部。 – 2012-02-21 01:43:09

幾小時前我意外地低估了這個數字，現在除非編輯問題，否則我不能更改我的投票。抱歉。 – Wyatt8740 2017-01-26 23:07:27

包含您的主要內容中，添加一個邊距等於導航欄的高度。例如，如果這是你的HTML：

<div id="navbar">...</div> 
<div id="content">...</div>

然後你的CSS是這樣的：

#navbar { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 50px; 
} 

#content { 
    margin-top: 50px; 
}

來源

2012-02-21 01:43:48

好，感謝的屏幕截圖。

#navbar_id { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 50px; 
    z-index: 25; 
} 

#main_stuff_id { 
    z-index: 24; 
    /*other 
    style 
    rules*/ 
}

牢記「CSS盒模型」太：http://www.w3schools.com/css/box-model.gif

來源

2012-02-21 01:43:50

這似乎沒有工作。我添加了一些截圖。 – 2012-02-21 02:01:54

這聽起來像你想強制某個元素保證金與position: fixed;集。我不認爲這會起作用，但是你可以在你想要修復的元素周圍放置一個固定位置的容器。這個容器可以有填充，然後會產生所需的效果。

<div style="position:fixed;padding:16px;background-color:#fff;width:100%;box-sizing:border-box"> 
    <!-- don't fix the inner element --> 
    <div style="background-color:red">The content you want to be fixed.</div> 
</div>

工作小提琴：http://jsfiddle.net/qtHtY/

來源

2012-02-21 01:46:20

問題是我的div具有透明度。 – 2012-02-21 01:59:55

在這種情況下，我認爲你不能滾動身體。您可以在固定內容下設置可滾動的DIV。 – 2012-02-21 02:07:49

將「填充」添加到div的外部？

回答

相關問題