侧栏下方的图像

问题描述

| 如图所示，我有一个CSS布局。 我想实现以下行为 img应该始终位于左侧边栏下方（如图所示）。问题在于左侧边栏包含折叠/展开链接的列表，展开时，img与左侧边栏重叠并且文本不可读。 谢谢     

解决方法

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