Подвижный div на свитке

Question

<div id="blue">
    <div id="red"></div>
</div>

Я хочу, чтобы этот красный div двигался внутри синего div на свитке.

Он никогда не должен выходить из голубого дива.

Есть код: http://jsfiddle.net/zhQZt/2/

Я надеюсь, вы понимаете, что я имею в виду...

Answer 1

Вы можете добиться этого с помощью некоторого умного позиционирования и z-индекса, чтобы он выглядел так, как будто красный div находится внутри синего div. Новый div был добавлен с более высоким z-index Значение, а затем красное поле и цвет фона, чтобы скрыть красное поле при его переполнении.

Новый CSS:

#continue {
 background:white;
position:relative;
 z-index:2;
height:100%;
 width: 200px;

}
#blue {
    height:300px;
    width:200px;
    background:blue;

position:relative
}

#red {
    height:50px;
    width:200px;
    position:fixed;
    background:red;
    overflow:hidden;
    z-index:1;
}​

Новый HTML:

<div id="blue">
<div id="red">
</div>
</div>
<div id="continue">
<!--Your line breaks -->
</div>​

См. Jsfiddle для рабочего примера: http://jsfiddle.net/zhQZt/5/

Answer 2

Код CSS, который вы ищете overflow: scroll;, объяснил здесь: http://www.w3schools.com/cssref/pr_pos_overflow.asp.

#blue {
    height:300px;
    width:200px;
    background:blue;
    overflow: scroll;
}

#red {
    height:50px;
    width:250px;
    background:red;
}

http://jsfiddle.net/zhQZt/2/