图片侧边栏

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%; 
}