语义-UI-React 加载组件后面的这些无线电切换的 z-index 是否不正确？

Question

我正在处理一个具有语义-UI 单选开关的表单，加载器和开关似乎加载到错误的 z-index。

我检查了 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 解决了问题。

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

语义-UI-React 加载组件后面的这些无线电切换的 z-index 是否不正确？

Is the z-index incorrect for these radio toggles behind the Semantic-UI-React Loading component?

z-index

radio

togglebutton

reactjs

semantic-ui-react