z-index priority

dabblet.css

/* z-index priority */
.custom.stacking-order { position: static; z-index: 2; 
float: left;margin-left:200px}
.z-index2     {position: relative; z-index: 2; }
.z-index1     {position: relative; z-index: 1; }
.opaque       {opacity: .999;   /* z-index: 0;auto;inherit */}
.overflow     {                    overflow: scroll;}
.inline-block {                    display: inline-block;}
.float        {                    float: left;}
.block        {                    display: block;}
.z-index-1    {position: relative; z-index: -1;}

li {height: 15px; width: 256px; color: #DDD;
	margin-top: -2em;
	padding: 1em;
	text-align: center;text-indent: 0px;
	background: linear-gradient(165deg, white 50%, transparent 50%),
	            linear-gradient(-165deg, white 50%, transparent 50%),
	            linear-gradient(red,blue);
	background-size: 200%;
	background-position: -150% -100%;
}
.custom.stacking-order { white-space: pre;}
.floa,t ~ * { margin-top: 2em; }
.inline-block { margin-top: -1em; }
.float { margin-top: -1em; }
.block { margin-top: 0em; }

dabblet.html

HTML-source stacking:<br>
Elements are obscured by their later siblings.


<ol class="custom stacking-order">The HTML-source stacking is overriden by certain styles:




<li class="z-index2">z-index: 2</li>
<li class="z-index1">z-index: 1</li>
<li class="opaque">0 < opacity < 1</li>
<li class="overflow">overflow: scroll</li><li class="inline-block">display: inline-block</li>
<li class="float">float: left</li>
<li class="block">display: block</li>
<li class="z-index-1">z-index: -1</li>
</ol>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}