Javascript 使用CSS停止元素移动

我目前正在开发一个组件，不断遇到一个恼人的bug。我有一个div，点击它会打开一个菜单。这包含在一个反应组分中，而反应组分又包含在另一个反应组分中

以下是CSS：

const FilterBox=styled（“div”）`
位置：相对位置；
显示器：flex；
背景色：${colors.silver}；
边框：1px纯色${colors.silver}；
边界半径：4px；
填充：4px；
高度：40px；
宽度：40px；
对齐项目：居中；
svg{
位置：绝对位置；
垂直对齐：中间对齐；
显示：内联块；
左边距：4倍；
文本对齐：居中；
}
`;
常量过滤器菜单=样式化（“div”）`
显示器：flex；
边缘顶部：10px；
最高：13%；
右：13vw；
背景：#ffffff；
框大小：边框框；
-webkit外观：无；
盒影：0px 2px 0px#dddee3；
边界半径：4px；
显示：${（props）=>（props.visible？“块”：“无”）}；
标签{
显示：块；
宽度：10vw；
利润率：10px；
左侧填充：10px；
}
跨度{
字体系列：Roboto；
字体风格：普通；
字体大小：正常；
字体大小：16px；
线高：24px；
显示器：flex；
对齐项目：居中；
颜色：${colors.night}；
输入{
右边距：8px；
宽度：16px；
高度：16px；
边框：1px实心#0f7070；
框大小：边框框；
边界半径：2px；
-webkit外观：无；
-moz外观：无；
：选中{
背景色：${colors.green}；
：之后{
内容：“\2714”；
字体大小：14px；
位置：绝对位置；
顶部：0px；
左：3px；
颜色：白色；
z指数：9999；
}
}
}
}
`;

例如：

它显示菜单等，但布局混乱，我也不认为它将在所有的响应。我哪里做错了

---

HTML的顺序很重要

首先，将

FilterBox

元素移动到

FilterMenu

的顶部：

<FilterMenu visible>
   <FilterBox
     id="filterbox"
     onClick={() => setFilterToggled(!isFilterToggled)}
    />

   {isFilterToggled &&
     allColumns.map((column) => (
       <div key={column.id}>
         <label>
           <span>
             <input type="checkbox" {...column.getToggleHiddenProps()} />{" "}
             {column.Header}
           </span>
         </label>
       </div>
     ))}
 </FilterMenu>

这将使元素始终保持在右上角

---

你能把一个JSFIDLE或类似的东西放在一起，这样我们就可以看到正在使用的组件了吗？当然，你已经更新了这个问题。这很有效！非常感谢你，我真不敢相信我错过了

const FilterBox = styled("div")`
  position: relative;
  margin-left: auto;
  display: flex;
  background-color: silver;
  border: 1px solid silver;
  border-radius: 4px;
  padding: 4px;
  height: 40px;
  width: 40px;
  align-items: center;
  svg {
    position: absolute;
    vertical-align: middle;
    display: inline-block;
    margin-left: 4px;
    text-align: center;
  }
`;