reactjs - Semantic-UI-React Loading 组件后面的这些单选按钮的 z 索引是否不正确？

Question

我正在开发一个具有 Semantic-UI Radio 切换开关的表单，并且加载程序和切换开关似乎加载到了错误的 z 索引中。

我检查了 css，切换开关包含以下内容

.ui.toggle.checkbox label:after {
    z-index: 2;
}

当加载器正在运行时

.ui.dimmer {
    z-index: 1000;
}

这似乎是适当的行为。我希望开关位于加载程序后面，以呈现最佳的用户体验。谁能告诉我当前的行为是否是设计使然？尝试确定这是否是要报告的错误或要请求的功能，或者我的实现是否存在问题。

我的代码(为简洁起见进行了编辑)

        import { Form, Dropdown, DropdownItemProps, Dimmer, Loader, Button, Icon, Segment } from "semantic-ui-react";
        return (
        <Fragment>
        <div style={{ display: "flex", flexDirection: "column" }}>
        <div className="ui segments">
          <PageHeader
            text="Some text"
            subText="Some subtext"
            pageIcon="cogs icon"
          />
        </div>
    
        <Dimmer.Dimmable dimmed={loading}>
          <Dimmer simple active={loading}>
            <Loader>Loading</Loader>{" "}
          </Dimmer>
    
          <Form onSubmit={() => save()}>
            <Form.Checkbox
                label="Label 1"
                checked={display}
                onChange={(e, { checked }) => setDisplay(!!checked)}
                toggle
              />
              <Form.Input
                label="Label 2"
                placeholder="Placeholder"
                value={data}
                onChange={(e, { value }) => setData(value)}
              />
            </Form.Group> 
          </Form>
        </Dimmer.Dimmable>
      </div>
    </Fragment>
);

Answer 1

这条评论帮助了我。使用 https://coder-coder.com/z-index-isnt-working/#alternative-solution-remove-positioning-from-the-content-so-it-wont-limit-the-modals-z-index 解决了该问题来自建议。

我对表单元素使用了粘性位置。不一定是最好的解决方案，但它足以达到此目的。