我的邊欄將我的整個網站推下去

所以我得到了這個網站，裏面的內容都很完美，頁眉，頁腳等等。上週我試圖添加一個邊欄，我意識到它推動了我的主要內容。所以很多問題是，我怎樣才能使我的邊欄的邊距/高度獨立於我的主要內容？（張貼CSS代碼如下）我的邊欄將我的整個網站推下去

DEMO：編輯：http://oldtimesdaily.tumblr.com/ 我的tumblr與代碼。它現在看起來如何。絕對位置奏效，主要內容回到頂端。但是現在我的側邊欄中的所有內容都擠在一起，我想絕對定位會刪除所有邊距？我應該用什麼來將不同的內容放在我的側邊欄上？

#quote { /*style for quote division*/ 
    position:relative; 
    width:375px; 
    height:70px; 
    border:1px solid black; 
    font-family:sans-serif; 
    font-size:95%; 
    padding:3px; 
    background-color:lightyellow; 
} 
#auth { /*style for quote author, if any*/ 
    position:absolute; 
    bottom:3px; 
    right:10px; 
} 
#sidebar {   /*editable*/ 
    background: url('http://s10.postimg.org/uag5u79d1/vline.png') repeat-y left center; 
    background-color: white; 
    width: 260px; 
    position: relative; 
    top: 700px; 
    left: 55%; 
} 
#sidebar .sTitle { 
    padding: 0 0 10px 0; 
    position: relative; 
    margin: 0px 20px 0px; 
    color: #222; 
    font-size: 15px; 
    line-height: 1; 
    font-family: QuicksandBold, Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    letter-spacing: 3px; 
    text-decoration: none; 
    border-bottom: 0px; 
} 
#sidebar .Categories { 
    font-size: 11px; 
    text-align: center; 
    padding: 3px 5px; 
    margin: 50px; 
}

來源

2013-06-24 Ming

其餘的你可以添加一個鏈接到演示？使用jsfiddle.net或codepen.io –

position: absolute;

將側邊欄的獨立頁面

來源

2013-06-24 15:05:41 Ygg

這工作！但是我從來沒有使用絕對定位之前，位置的東西怎麼樣？我的側邊欄現在有2個div，一個用於引號，另一個用於分類。當我使用親戚時，他們被放置在彼此的頂部。當我改變成絕對的時候，他們都被卡在一個空間上。 – Ming

http://www.barelyfitz.com/screencast/html-training/css/positioning/嘗試使用'position：absolute'只爲您想要獨立於其他元素的div。 – Ygg

真正的問題是它推動了主要內容。我不想讓邊欄的邊距和高度影響我的主要內容。我現在注意到，在一個絕對的位置上，當我縮小或放大時，它也會出現混亂。有沒有一種方法可以保持相對位置，但是也可以避免我的邊欄內容混淆網站的其他部分？ – Ming

我的邊欄將我的整個網站推下去

回答

相關問題