Полоса прокрутки переполненного div, показанного выше дочернего div с более высоким z-index только в браузерах на основе Chromium

Question

У меня есть два divs с position: fixed;, один из которых является потомком другого. Используя z-index, я кладу одну из них поверх другой. div на обороте дополнительно использует overflow: auto; для того, чтобы иметь полосу прокрутки при большом количестве контента.

У меня сейчас проблема в том, что в браузерах на основе Chromium сгенерированная полоса прокрутки появляется поверх ребенок div. В других браузерах, таких как Firefox, дочерний элемент div отображается над полосой прокрутки.

Моя цель состоит в том, чтобы браузеры на основе Chromium вели себя так же, как Firefox, при этом полоса прокрутки скрывалась за ребенок div.

#main{
  background-color: yellow;
  height: 200px;
  width: 100px;
  overflow-y: auto;
  z-index: 106;
  position: fixed;
}

#overlay{
  background-color: red;
  height: 100px;
  width: 100px;
  left: 50px;
  top: 20px;
  z-index: 9999;
  position: fixed;
}

<div id="main">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
  <div id="overlay">
  </div>
</div>

Вот jsFiddle, чтобы показать проблему: https://jsfiddle.net/4pfc3anx/7/

Я видел, что когда я двигаю ребенка div вне родителя div, поведение меняется в соответствии с моим предполагаемым поведением, однако это нецелесообразно с текущей базой кода, и я бы предпочел CSS -только решение.

Как я могу изменить свой код, чтобы браузер на базе Chromium выглядел как firefox?

Answer 1

Удалить position: fixed; из #main. z-index также не требуется.

#main{
  background-color: yellow;
  height: 200px;
  width: 100px;
  overflow-y: auto;
}

#overlay{
  background-color: red;
  height: 100px;
  width: 100px;
  left: 50px;
  top: 20px;
  position: fixed;
}

<div id="main">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
  <div id="overlay">
  </div>
</div>

ОБНОВЛЕНИЕ для #основной фиксированной позиции

Обернуть текст в #main чем-то (например, div) с height: 100%; и замените overflow-y: auto; с #main css на этот элемент.

Всегда рекомендуется оборачивать текст элементом, это дает больше возможностей для манипуляции.

#main {
  background-color: yellow;
  height: 200px;
  width: 100px;
  position: fixed;
}

.content {
  overflow-y: auto;
  height: 100%;
}

#overlay {
  background-color: red;
  height: 100px;
  width: 100px;
  left: 50px;
  top: 20px;
  position: fixed;
}

<div id="main">
  <div class="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  </div>
  <div id="overlay">
  </div>
</div>

ОБНОВЛЕНИЕ возможные решения для сохранения фиксированного положения

• Сделать полосу прокрутки невидимой. (Я добавил тени сверху и снизу, чтобы определить, что имеется прокручиваемый контент, из какого-то решения из SO. Но, конечно, если нижняя часть идет под всю страницу, когда main имеет большую высоту, она не видна)

#main {
  background-color: yellow;
  height: 150px;
  width: 100px;
  overflow-y: auto;
  z-index: 106;
  position: fixed;
  
  outline: dashed 1px blue;
}

#main::-webkit-scrollbar {
  display: none;
}

#overlay {
  background-color: red;
  height: 100px;
  width: 100px;
  left: 50px;
  top: 20px;
  z-index: 9999;
  position: fixed;
}

#main {
  background: /* Shadow covers */
  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
  radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background: /* Shadow covers */
  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
  radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
}

<div id="main">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  <div id="overlay">
  </div>
</div>

• Переместить полосу прокрутки влево.

#main {
  background-color: yellow;
  height: 200px;
  width: 100px;
  overflow-y: auto;
  z-index: 106;
  position: fixed;
  direction: rtl;
}

#main .ltr {
  direction: ltr;
  display: flex;
}

#overlay {
  background-color: red;
  height: 100px;
  width: 100px;
  left: 50px;
  top: 20px;
  z-index: 9999;
  position: fixed;
}

<div id="main">
  <span class="ltr">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  </span>
  <div id="overlay">
  </div>
</div>