переполнение: скрыто в позиции: исправлено

Question

У меня есть два деления на разных z-слоях. Div sidebar (красным) слева и Div main справа. Оба имеют встроенные 2 div.

(красный фон) sidebar div останавливается, как и предполагалось, на 50% страницы. Тем не менее, я не могу скрыть переполнение [SHOULD NOT BE SEEN. BUT IS VISIBLE.] этого div. Таким образом, он перекрывает второй внутренний элемент main div [BLOCK RIGHT].

Вот дилемма, видимая с правой стороны на белом фоне.

http://jsfiddle.net/brazim/v6rk1b4q/39/

Мотивация для этого макета : С помощью Javascript пользователь сможет отображать либо полный контент sidebar, либо main, перетаскивая правый край *. 1020 * деление влево или вправо.

Я могу обработать JavaScript, только правильное переполнение отсутствует.

Спасибо за любые подсказки в JsFiddle.

Answer 1

Элементы с position: fixed относятся не к его родительскому контейнеру, а к окну просмотра, поэтому на параметр overflow это не влияет. Для этого вам следует использовать абсолютное позиционирование или, если вам нужно это исправить (учтите, что в случае боковой панели она уже зафиксирована его родителем), используйте альтернативное решение, например display: none

Ссылка: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Fixed_positioning