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.
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.
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.
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.
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):
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');
}
http://en.wikipedia.org/wiki/Structure_of_the_Earth ?
Exosphere Thermosphere Mesosphere Stratosphere Troposphere Crust UpperMantle Mantle OuterCore InnerCore
geeky enough for you?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With