Почему элемент с абсолютным позиционированием, позиционируется, относительно контента блока родителя?

Question

[Александр Маджугин]

Сабж.
Вот тут: kipov.ru/address/kirov
Правое красное меню.

Структура html:

<div class="scroller">
            <div class="scrolled">
                <ul id="category-menu">
                    ...
                </ul>
            </div><!--.scrolled-->
			<div class="scroller_bar"></div>
		</div><!--.scroller-->

CSS:

.scroller {
        position: relative;
        height: inherit;
        overflow-y: scroll;
        width: 5000px;
        overflow-x: hidden;
    }
        .scrolled {
            position: relative;
            width: 5000px;
        }
        .scroller_bar {
            position: absolute;
            height: 0px;
            top: 0;
            opacity: 0;
            -webkit-transition-duration: 0.1s;
            -moz-transition-duration: 0.1s;
            -o-transition-duration: 0.1s;
            transition-duration: 0.1s;
        }

Почему элемент scroller_bar позиционируется по высоте относительно края .scrolled, а не края .scroller в который он вложен?
Можно его как-то заставить позиционироваться относительно верхнего края .scroller?

Сейчас мне приходится добавлять позицию прокрутки чтобы компенсировать это позиционирование в top, но это портит анимацию. Или транзишен отключать приходится (((

Answer 1

[Станислав]

потому что у блока родителя position: relative;

Comments

[Александр Маджугин]

Ну "почему" здесь больше риторический вопрос. Хотя ответ не очевиден. Да и поведение вовсе не очевидно. Ну и что что у родителя relative? Он как раз для этого и relative, чтобы внутри можно было заюзать absolute относительно него.
Бороться возможно?

Answer 2

[Глюкъ Виртуален]

Потому что у родителя выставлен relative.
Либо уберите relative, либо перенесите "ребенка" в другое место.

Comments

[Александр Маджугин]

Но мне надо, чтобы .scroller_bar позиционировался относительно .scroller. Ни то ни другое не позволят мне это сделать.
Теоретически можно добавить .scroller-wrapper над .scroller с такими же размерами и вытащить .scroller_bar в него, но добавлять лишнюю сущность не хочется...