CSS Master

Figure 6.6. A stacking context with positioned and unpositioned elements with varying z-index values

Three-dimensionaltransformsaddadditionalcomplexity.Anelementshiftedalong

theZ-axismayrenderonadifferentplanethanitscontainer.Elementsmayalso

intersectwithotherelementsacrosslayers.Still,thebasicrulesofthestackingorder

apply.

Transformedelementsmayalsooverlapotherelementsonthepage,andprevent

themfromreceivingmouse,touch,orpointerevents.Oneoptionforfixingthisis

tochangethepositionandz-indexvaluesofthetransformedoroverlappedele-

ment.

Inbrowsersthatsupportit,youcanalsousethepointer-eventsCSSpropertywith

avalueofnone.Applyittothetransformedelementthat’soverlappingcontent.

Thepointer-eventspropertyletsuscontrolwhetheranelementreceivespointer

events(forexample,clickormousedown)events.Thelatestversionsofallmajor

browserssupportthepointer-eventspropertyforusewithHTML.Usez-index

asafallbackforolderbrowsers.^3 ItoriginatedwiththeScalableVectorGraphics

specification,^4 butrecentversionsofCSShavedefineditsbehaviorformoregeneral

markupuse.

(^3) Thepointer-eventsCSSpropertyisdistinctfromthePointerEventsDOMeventobject.
(^4) http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty
230 CSS Master