对于 Semantic-UI-React Loading 组件后面的这些单选切换，z-index 是不是不正确？

Posted 2023-03-27

【中文标题】对于 Semantic-UI-React Loading 组件后面的这些单选切换，z-index 是不是不正确？

【英文标题】：Is the z-index incorrect for these radio toggles behind the Semantic-UI-React Loading component?对于 Semantic-UI-React Loading 组件后面的这些单选切换，z-index 是否不正确？

【发布时间】：2021-01-27 01:01:10

【问题描述】：

我正在处理一个带有 Semantic-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>
);

【问题讨论】：

也许它会帮助你 - coder-coder.com/z-index-isnt-working 。确保您没有限制其子元素的 z-index 级别的父元素。

【参考方案1】：

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

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