Иерархия фиксированных обрезанных элементов - PullRequest
Новая
       27

Иерархия фиксированных обрезанных элементов

0 голосов
/ 24 апреля 2018

У меня есть два объекта с position: fixed;

Первый помещается сразу после тега <body>, второй внутри div.

Я хочу красный (внутриdiv) находиться перед черным, но его нужно обрезать в том, что содержит div.

Он отлично работает с z-index и т. д., но как только я применяю clip-path к содержащему div,красный квадрат находится под черным. 

html,
body {
  width: 100%;
  height: 100%;
}

.box {
  height: 80vh;
  width: 100%;
}

.b1 {
  background: #3D6CB9;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.b2 {
  background: #21ABA5;
  height: 160vh;
}

.top {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  left: 1rem;
  top: 1rem;
}

.t1 {
  z-index: 1;
}

.t2 {
  z-index: 2;
  background: crimson;
  transform: translateY(20px) translateX(20px);
}
<div class="top t1"></div>

<div class="box b1">
  <div class="top t2"></div>
</div>
<div class="box b2"></div>
...