这些单选按钮在语义UI响应加载组件后面的z索引是否不正确？

问题描述

我正在处理具有语义UI Radio切换的表单，并且加载器和切换器似乎正在错误的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>
);

解决方法

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

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