Html 绝对定位没有按我想的那样工作

我试图定位的元素仍然位于其父元素的内部，即使我已将其定位为绝对

HTML

这是祖先的风格

cuik-app-creator,
cuik-app-editor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba($color: theme.$secondary, $alpha: 0.05);
}

这就是它看起来的样子：

。也就是说，到最近的祖先，它有一些非静态的

位置

样式应用于它。当没有定位的祖先时，这只是

元素

例如，在这种情况下，未定位包含祖先的元素，因此

绝对

元素相对于视口：

.parent{
高度：100px；
宽度：100px；
边框：黑色实心2px；
}
.子元素{
边框：黑色虚线2px；
位置：绝对位置；
右：0；
底部：0；
}

父元素
子元素

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 500px;
  height: 80vh;
  overflow-y: auto;
  background-color: theme.$secondary;
  border: 2px solid theme.$primary;
  border-radius: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: theme.$primary;
  font-family: theme.$Poppins;

  cuik-url-box,
  cuik-img-upload {
    position: absolute;

    &:is(cuik-url-box) {
      top: 50%;
      right: -50%;
      transform: translate(0%, -50%);
    }
    &:is(cuik-img-upload) {
      top: 50%;
      left: -50%;
      transform: translate(0%, -50%);
    }
  }
}

cuik-app-creator,
cuik-app-editor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba($color: theme.$secondary, $alpha: 0.05);
}