transform
property: Stacking context
Adding the transform property to an element — in this case the image — gives that element a stack level of 0. According to the rules of the stacking context, this means a transformed item will be stacked on top of items that do not have a stacking context.
Positioned elements and elements with an opacity
of less than 1 may be stacked on top of a transformed element if: 1) the element appears after the transformed element in the HTML source; or 2) if it has a higher z-index
.
Clicking the Toggle transform button toggles a .transformed
class for the image. This class sets a translation transform of 50% along the X axis.