z-index div随着屏幕大小的变化而不断移动

Question

我正在为我的 react 应用程序使用从 Figma 到 CSS 的 UI。目前，我正在尝试制作 3 层 div（分别为 className：'a'、'b'、'c'），它们彼此重叠，div 'a' 在底部，然后是 'b' ，然后是顶部的“c”。它们都共享一个父 div。

现在我没有设置 div 'a' 位置，'b' 和 'c' 都设置为位置 'absolute'，z-index 分别为 1 和 2。除非我更改了屏幕尺寸，否则它工作正常。当我扩大屏幕时，div 'b' 和 'c' 都开始向右移动。我试图将它们更改为“固定”或“相对”位置，但也没有用。 下面是我的 react 组件和 css。

//react component

const Zoom = () => {
  return (
    <div>
      <BackgroundImage className='a' />
      <PromptBox className='b'/>
      
      <Link to="/zoom">
        <Button className='c' />
      </Link>
    </div>
  );
};
//css 
 .a {
  width: 895px;
  height: 393px;
  left: 3px;
  top: 13px;
    }
.b {
position: absolute;
left: 25.56%;
right: 25.89%;
top: 8.15%;
bottom: 19.16%;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 
0.25));
   }
.c {
   cursor: auto;
   position: absolute;
   left: 40.04%;
   right: 18.3%;
   top: 25.25%;
   bottom: 68.61%;
   }

Answer 1

您希望移动的 div 在哪里？

根据MDN，当您设置position: absolute;“它相对于其最近定位的祖先定位”。如果没有祖先有一个声明的位置，那么它使用 Window 元素，我相信。我认为这就是您的代码中发生的情况。

尝试将position: relative; 添加到包含<div>。请注意，由于您没有在“b”和“c”上设置宽度和高度值，它们的大小可能由左/右/上/下值决定（取决于您添加的其他 CSS）。