Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a standard convention for naming z-index layers? [closed]

Tags:

html

sass

I want to create some sass variables to represent different z-index values, and would like to use a pre-existing naming convention if one exists. I'm looking for something like how Swing defines root, layered, content, and glass panes, or a pointer to some theory that I can use as a naming basis.

like image 657
Ben Taitelbaum Avatar asked Nov 26 '12 23:11

Ben Taitelbaum


People also ask

Is there a default Z index?

The default z-index value of all the elements on a web page is auto, which corresponds to 0 where no z-index is assigned. An element with z-index: -1 will be displayed behind all other elements on the page, assuming they are given no z-index values.

How do you specify Z index?

The z-index property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis. If you are not familiar with the z-axis, imagine the page as a stack of layers, each one having a number.

What does Z Index 9999 mean?

In CSS code bases, you'll often see z-index values of 999, 9999 or 99999. This is a perhaps lazy way to ensure that the element is always on top. It can lead to problems down the road when multiple elements need to be on top.

What is the default Z index value in positioning elements?

The default value when positioned is z-index: auto which is similar to z-index: 0 . If you had multiple positioned elements with z-index: auto or z-index: 0 they would be stacked according to the (W3C CSS2 specification on stacking context):


2 Answers

After thinking about this a bit at work, here's what we came up with (wrapped in a Sass map):

$z-index: (
  'satellite'           :       5000,
  'skyscraper'          :       1000,
  'tower-block'         :       500,
  'house'               :       200,
  'bungalow-chimney'    :       110,
  'bungalow'            :       100,
  'shed'                :       50,
  'postbox'             :       10,
  'curb'                :       1,
  'pavement'            :       0,
  'pothole'             :      -10,
  'ditch'               :      -20,
  'sewer'               :      -100,
  'mine'                :      -300,
  'seabed'              :      -1000
);

Which is then referenced like so:

.foo {
  z-index: map-get($z-index, 'pothole');
}
like image 196
fredrivett Avatar answered Oct 12 '22 14:10

fredrivett


http://en.wikipedia.org/wiki/Structure_of_the_Earth ?

Exosphere Thermosphere Mesosphere Stratosphere Troposphere Crust UpperMantle Mantle OuterCore InnerCore

geeky enough for you?

like image 39
Carol McKay Avatar answered Oct 12 '22 12:10

Carol McKay