Monsterbox Productions » Blog Archive » Keep Track of your Z-Indexes with Sass Variables

Keep Track of your Z-Indexes with Sass Variables

Nov 22 2010 by Andrew Brown

When I add z-indexes I try to be modest with my numbers eg. (1,5,10,100) but then in the midst of working my numbering scheme falls apart and I’ll end up with numbers such as eg.(80,79,70,1000,9999,9999,85).

So what I’ve done is added in my application.sass all my z-indexes as variables:

/* z-indexes
$z_block_area_wrap:      999999
$z_tipsy:                100000
$z_options_wrap:         99999
$z_options:              99999
$z_user_options_drop:    99998
$z_expanded:             9999
$welcome_close:          2005
$z_header_wrap:          2000
$z_item_close:           2000
$z_welcome:              1999
$z_actionables:          1999
$z_library_mass_actions: 1999
$z_drag_handle:          30
$z_name:                 20
$z_icon:                 10
$z_items_count:          30
$z_column_wrap:          10
$z_wrapper:              10
$z_loading_graphic:      10

Now I can readjust these numbers so they are more sane and from now on I’ll never be confused about what number to use for my z-indexes again.

Write a Comment to “Keep Track of your Z-Indexes with Sass Variables”