Zindex 列表

Minwe LUO edited this page Mar 31, 2015 · 1 revision

Amaze UI 中整个页面被分成三层。

  • 1.背景层:主题内容背后的内容,最基础的层。
  • 2.视觉层:主体内容,属于中间的层。
  • 3.前置层:主题内容上漂浮的内容,视觉上最上面的层,保证了这层中的内容永远在其它层的上面。
  • web 组件层级高于别的组件层级。

Amaze UI 中目前没有背景层,不做讨论。

视觉层:

  • web 组件: 1.Menu 2. GoTop 3. Navbar
  • js 插件: 1. Sticky 2. NProgress 3. DropDown 4. Popover
  • css : 1. topbar

前置层:

  • web 组件: 1. Figure 2. Gallery 3. Paragraph
  • js 插件: 1. Modal 2. OffCanvas
  • @global-z-index: 1000;
变量名 z-index 值
@z-index-topbar-fixed @global-z-index
@z-index-sticky @global-z-index + 10
@z-index-dropdown @global-z-index + 20
@z-index-popover @global-z-index + 30
@z-index-offcanvas @global-z-index + 90
@z-index-dimmer @global-z-index + 100
@z-index-modal @global-z-index + 110
@z-index-pureview @global-z-index + 120
@z-index-nprogress @global-z-index + 1000
@z-index-header-fixed @global-z-index + 10 //widget
@z-index-navbar @global-z-index + 10 //widget
@z-index-gotop-fixed @global-z-index + 40 //widget
@z-index-menu @global-z-index + 50 //widget