позиция фиксированный элемент всегда внутри div

Question

Мне нужно уметь фиксировать элемент всегда внутри div. Проблема возникает при изменении размера окна. Затем фиксированный div всегда плавает над всеми другими элементами. Как это предотвратить? Мне нужно, чтобы div был исправлен, но находился внутри div.

Вот пример:

<div id="main"> 
    <div id="one" style="background-color:yellow;"></div> 
    <div id="two" style="background-color:black;"></div> 
    <div id="three" style="background-color:yellow;"> 
     <div id="four"></div> 
    </div> 
</div> 

CSS:

#main 
{ 
    position:relative; 
    width:1200px; 
    top:0; 
    bottom:0; 
    left:100px; 
} 
#one,#two,#three 
{ 
    position:relative; 
    width:100px; 
    height:1000px; 
    float:left; 
    top:0; 
    bottom:0; 
} 
#four 
{ 
    position:fixed; 
    top:50px; 
    background-color:blue; 
    width:100px; 
    height:200px; 
} 

EXAMPLE попробуйте двигаться горизонтальная прокрутка влево и вправо, и вы увидите, что происходит.

Answer 1

Изменить положение относительно.

Пример

#four { 
    background-color: blue; 
    height: 200px; 
    position: relative; 
    top: 50px; 
    width: 100px; 
} 

Answer 2

Отъезд this answer on a similar question. К сожалению, проблема, с которой вы столкнулись, - это то, что невозможно решить с помощью CSS.