Почему position:fixed налезает на скролл внутри overflow:auto?

Question

[Владимир]

Вместо тысячи слов посмотрите мой pen
cdpn.io/DjIcF

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

Comments

[Владимир]

Хотелось бы решить вопрос без скролл-плагинов.

Answer 1

[Владимир]

В общем, если кому интересно, решил с помощью js
Задаем ширину для .fixed = ширине .contentfill
codepen.io/cosss/pen/Faxnb

Comments

[leonsxl]

Мне пришлось ещё и высоту корректировать в своём проекте, но зато теперь у меня модальное окно как в ВК!))

Answer 2

[Виталий Киренков]

Я как то столкнулся с такой траблой. Только у меня ещё была необходимость в стилизованном скролле. Так что я заюзал плагин, а потом уже поигрался с з-индексами.
exelum.com/news
Плагин - Nicescroll.

Answer 3

[TuMko]

Столкнулся с такой проблемой. Причиной было то, что тегу html прописал height: 100%

Answer 4

[Hovhannes Sargsyan]

интересный случай , думаю странности от того что фиксед внутри фиксед, если внутренний поставить absolute, то все нормально, но не знаю насколько тебе будет полезно,

вот

jsfiddle.net/sarhov/CFv9y

Comments

[Владимир]

В том-то и дело, что .fixed должен всегда оставаться на своем месте независимо от скролла. Там будет важная информация и навигация

Answer 5

[Marina]

jsfiddle.net/EDgnL

Comments

[Владимир]

Да, это компромисс, видимо так и придется оставить. Однако хотелось чтобы скролл доходил до .header, и вообще скроллился только .content, потому что на других страницах .fixed может не быть

[Marina]

Если хотите разобраться почему так происходит в вашем варианте, взгляните на спецификацию: www.w3.org/TR/CSS2/visuren.html#choose-position (конкретнее вот на эту фразу: "the box is fixed with respect to the viewport")