@@ -710,6 +710,83 @@ <h3>The <code>transform</code> property</h3>
710710
711711 </ section >
712712
713+ < section >
714+ < h3 > The < code > z-index</ code > property</ h3 >
715+
716+ < div class ="propdef ">
717+ < dl >
718+ < dt >
719+ < span class ="index-def " title ="'z-index' "> < strong > 'z-index'</ strong > </ span >
720+ </ dt >
721+ < dd >
722+ < table class ="propinfo " cellspacing ="0 " cellpadding ="0 ">
723+ < tbody >
724+ < tr valign ="baseline ">
725+ < td > < em > Value:</ em > </ td >
726+ < td > auto | <integer>
727+ </ td >
728+ </ tr >
729+ < tr valign ="baseline ">
730+ < td > < em > Initial:</ em > </ td >
731+ < td > auto
732+ </ td >
733+ </ tr >
734+ < tr valign ="baseline ">
735+ < td > < em > Applies to:</ em > </ td >
736+ < td > < a href ="#scene-elements "> Scene elements</ a >
737+ </ td >
738+ </ tr >
739+ </ tbody >
740+ </ table >
741+ </ dd >
742+ </ dl >
743+ </ div >
744+ < p > The meanings of the values of this property for XML3D elements:</ p >
745+ < dl >
746+ < dt > < span class ="index-def " title ="'none', definition of "> < strong > auto</ strong > </ span >
747+ </ dt >
748+ < dd > This is the default value and causes the element to be rendered in the same z-layer (stacking context) as its parent element.
749+ If no other z-index values appear in the scene this means all elements will be rendered in a single z-layer according
750+ to their distance from the camera.
751+ </ dd >
752+ < dt > < span class ="index-def " title ="definition of other values "> <other values></ span >
753+ </ dt >
754+ < dd > Any value other than '0' will create a new stacking context, similar to the behavior of z-index for normal
755+ HTML elements.
756+ </ dd >
757+ </ dl >
758+
759+ < p > During rendering objects will first be sorted into bins according to the stacking contexts present in the scene.
760+ Then the bins will be rendered from lowest z-index to highest, with the objects in each bin sorted according
761+ to their distance from the camera. The depth buffer will be cleared between each bin.</ p >
762+
763+ < p > This has the effect of rendering objects with a higher z-index on top of those with a lower z-index
764+ regardless of their spatial orientation in the scene.</ p >
765+
766+ < p > Note that the same stacking context rules apply for XML3D elements as for HTML elements. This means an
767+ element's z-index is always relative to the closest parent element having a z-index value other than 'auto'.</ p >
768+
769+ Here are some examples for the 'z-index' property:
770+ < pre class ="example highlight ">
771+ <mesh src="example.xml" style="z-index: 5"></mesh>
772+ <mesh src="example.xml" style="z-index: 10"></mesh> <!-- Will always be drawn above the other two meshes -->
773+ <mesh src="example.xml" style="z-index: -5"></mesh> <!-- Will always be drawn below the other two meshes -->
774+ </ pre >
775+
776+ In the example below the mesh with the z-index value of 500 will be drawn < em > below</ em > the other meshes. This
777+ is because both groups create their own stacking contexts, and the second group's z-index is lower than that of the first.
778+ < pre class ="example highlight ">
779+ <group style="z-index: 1">
780+ <mesh src="example.xml" style="z-index: 10"></mesh> <!-- Will always be drawn above the second mesh -->
781+ <mesh src="example.xml"></mesh>
782+ </group>
783+ <group style="z-index: -1">
784+ <mesh src="example.xml" style="z-index: 500"></mesh> <!-- Will be drawn *below* the other meshes -->
785+ </group>
786+ </ pre >
787+
788+ </ section >
789+
713790</ section >
714791
715792< section >
0 commit comments