Блок с «переполнением: прокрутка» перекрывает тень - PullRequest
Новая
       8

Блок с «переполнением: прокрутка» перекрывает тень

0 голосов
/ 27 февраля 2019

Я использую один блок слева, чтобы показать список.И другой, чтобы показать подробную информацию, у него есть тень.Когда левый блок имеет «переполнение: прокрутка», он начинает рисовать фон элементов над тенью. 

.div-left {
  float: left;
  width: 64px;
  max-height: 200px;
  overflow-y: scroll;
}

.div-right {
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.8);
  display: inline-block;
  width: calc(100% - 64px);
}
<div>
  <div class='div-left'>
    <div style="background-color: red;">1</div>
    <div style='background: white;'>2</div>
    <div>3</div>
    <div style="background-color: red;">4</div>
    <div>1</div>
    <div style='background: red;'>2</div>
    <div style='background: white;'>3</div>
    <div>4</div>
  </div>
  <div class='div-right'>Replaced CSS linter with Stylelint which<br>supports all modern syntax. JSHint<br>also got a big update lately, now supports<br>async/await<br>syntax! Replaced CSS linter<br>with Stylelint which supports all modern syntax. JSHint<br>also got a big update lately, now supports<br>async/await syntax!</div>
</div>

Как сделать, чтобы тень рисовалась над списком?

1 Ответ

0 голосов
/ 27 февраля 2019

Похоже, что overflow: scroll увеличивает порядок наложения элемента.

Вы можете просто добавить position: relative в правый столбец, чтобы снова сделать его сверху, и z-index не является обязательным в этом случае. 

.div-left {
  float: left;
  width: 64px;
  max-height: 200px;
  overflow-y: scroll;
}

.div-right {
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.8);
  display: inline-block;
  width: calc(100% - 64px);
  position: relative; /* NEW */
}
<div>
  <div class='div-left'>
    <div style="background-color: red;">1</div>
    <div style='background: white;'>2</div>
    <div>3</div>
    <div style="background-color: red;">4</div>
    <div>1</div>
    <div style='background: red;'>2</div>
    <div style='background: white;'>3</div>
    <div>4</div>
  </div>
  <div class='div-right'>Replaced CSS linter with Stylelint which<br>supports all modern syntax. JSHint<br>also got a big update lately, now supports<br>async/await<br>syntax! Replaced CSS linter<br>with Stylelint which supports all modern syntax. JSHint<br>also got a big update lately, now supports<br>async/await syntax!</div>
</div>
...