圖片側邊欄

Question

我有一個CSS佈局，如在this圖片。

我想達到以下行爲

IMG應始終低於左側邊欄（如圖片）。問題是，左側邊欄包含摺疊/展開鏈接的列表，當您展開它時，img與左側邊欄重疊並且文本不可讀。

謝謝

Answer 1

HTML

<div id="container"> 
    <div id="header">ert</div> 
    <div id="left-sidebar">sdfsdfsdft 
     <div id="img">IMG</div></div> 
    <div id="right-sidebar">ert</div> 
    <div id="content">aaert</div> 
</div> 

CSS：

#container { 
    width:100%; 
    height:100%; 
} 
#header { 
    background: url("img.png") red; 
    background-repeat: no-repeat; 
    background-position: right top; 
    height: 125px; 
    margin:-10px -10px 0px -10px; 
} 

#left-sidebar { 
    left: 0; 
    height:2000px; 
    width:200px; 
    background-color: yellow; 
    position: fixed; 
} 

#right-sidebar { 
    right:0; 
    position: fixed; 
    width:200px; 
    height:2000px; 
    background:green; 
} 
#img { 
    border:1px solid; 
    position: relative; 
    top:5px; 
    left:0px; 
    margin-left:10px; 
    width:175px; 
    height:175px; 
} 

#content { 
    margin-left:-10px; 
    position: absolute; 
    margin:auto; 
    top:130px; 
    left:208px; 
    right:208px; 
    border:1px solid; 
    Height:100%; 
}