Question

我有两个position: fixed;

的对象

第一个放在<body>标记之后，第二个位于div内。

我希望红色的那个（div中的那个）位于黑色的前面，但需要在包含div的内容中剪切。

它与z-index等一起工作正常但是只要我将clip-path应用到包含的div，红色方块就会置于黑色的下方。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

固定剪裁元素的层次结构

0 个答案: