Applying a transform => new stacking context

Applying a transform on an element (unless its value is none) creates a new stacking context and the element is going to act as a containing block for any position: fixed; children it may have.

by thebabydino

HTML

<div class='parent'>
    <div class='child'>No transform applied on my parent.</div>
</div>
<div class='parent'>
    <div class='child'><code>transform: rotate(30deg)</code> applied on my parent.</div>
</div>

CSS

.child {
    background: darkslateblue;
    color: lemonchiffon;
}