antd message 层级
时间: 2023-08-31 09:12:58 浏览: 127
Ant Design的`message`组件默认会在页面的顶层添加一个全局的蒙层,用于遮盖其他元素并展示消息。具体的层级关系如下:
```
<div class="ant-message">
<div class="ant-message-notice">
<div class="ant-message-notice-content">
<!-- 消息内容 -->
</div>
</div>
</div>
<div class="ant-message-mask"></div>
```
其中,`.ant-message`是`message`组件的容器,`.ant-message-notice`是消息内容的容器,`.ant-message-mask`是蒙层的容器。在默认情况下,`.ant-message-mask`的`z-index`属性值为`1010`,`.ant-message-notice`的`z-index`属性值为`1011`,因此消息内容会覆盖在蒙层之上。
如果需要修改`message`组件的层级关系,你可以通过自定义样式来实现,具体可以参考Ant Design的官方文档。
相关问题
antd select层级
antd select 组件的层级结构如下:
```
<Selector>
<Selection>
<input />
<Clear />
<Arrow />
</Selection>
<Dropdown>
<Filter>
<input />
</Filter>
<Menu>
<MenuItem />
<MenuItem />
...
</Menu>
</Dropdown>
</Selector>
```
其中,Selector 是整个组件的容器,Selection 是选择框部分,Dropdown 是下拉框部分,Filter 是搜索框部分,Menu 是下拉菜单部分。
antd message z-index
Ant Design 中的 Message 组件的默认 z-index 是 1010。如果需要修改它的层级,可以使用 CSS 自定义样式来覆盖默认值,例如:
```
.ant-message {
z-index: 9999;
}
```
这样就将 Message 的层级修改为了 9999。注意,如果有多个组件都需要修改层级,应该给它们赋予不同的 z-index 值,以免出现层级覆盖的问题。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)