Изображение под боковой панелью

У меня есть макет CSS, как на этом изображении.

Я бы хотел добиться следующего поведения

img всегда должен находиться под левой боковой панелью (как на картинке). Проблема в том, что левая боковая панель содержит список ссылок свертывания / развертывания, и когда вы расширяете его, img перекрывается с левой боковой панелью, и текст не читается.

Спасибо


css positioning
person xralf    schedule 26.05.2011    source источник
comment
А какой HTML вы используете? Что ты пробовал? Что пошло не так?   -  person David says reinstate Monica    schedule 26.05.2011
comment
Вы говорите, пожалуйста, не решайте эту проблему - она ​​была решена в другом месте, но это не было редактированием вопроса - это означает, что вы знали, что она уже решена before путем публикации. Так зачем тогда публиковать?   -  person KP.    schedule 26.05.2011
comment
Я разделил исходный вопрос на две части, чтобы избежать путаницы. Часть первая была решена. Кажется, что части независимы.   -  person xralf    schedule 26.05.2011
comment
@KP, есть пятиминутная отсрочка, когда правки не сохраняются как "правки".   -  person David says reinstate Monica    schedule 26.05.2011
comment
Вам нужно будет опубликовать код, чтобы мы могли понять, почему изображение не перемещается вместе с левым контейнером.   -  person Brent Friar    schedule 26.05.2011
comment
-1 за разделение вопроса и добавление путаницы в систему. Если вас не устраивает первоначальное решение, почему бы не опубликовать там дополнительное требование и разрешить его по своему усмотрению?   -  person ljubomir    schedule 26.05.2011

Ответы (1)


arrow_upward
1
arrow_downward

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%;
}
person buhbang    schedule 26.05.2011