| <!DOCTYPE html> |
| <!-- |
| | Elements that have the transform property defined on them should appear |
| | infront of standard flow elements. |
| --> |
| <html> |
| <head> |
| <style> |
| .containing-block1 { |
| position: absolute; |
| } |
| .containing-block2 { |
| position: absolute; |
| transform: translateX(75px); |
| } |
| |
| .first-static-box { |
| width: 50px; |
| height: 50px; |
| background-color: rgb(255, 100, 0); |
| } |
| .second-static-box { |
| width: 50px; |
| height: 50px; |
| background-color: rgb(100, 255, 0); |
| } |
| .transform-box1 { |
| width: 25px; |
| height: 100px; |
| transform: translateY(-100px); |
| background-color: rgb(0, 100, 255); |
| } |
| .transform-box2 { |
| width: 25px; |
| height: 100px; |
| transform: translateY(100px); |
| background-color: rgb(0, 100, 255); |
| } |
| </style> |
| </head> |
| |
| <body> |
| <!-- Here the transform box is declared after the static boxes --> |
| <div class="containing-block1"> |
| <div class="first-static-box"></div> |
| <div class="second-static-box"></div> |
| <div class="transform-box1"></div> |
| </div> |
| |
| <!-- Here the transform box is declared before the static boxes --> |
| <div class="containing-block2"> |
| <div class="transform-box2"></div> |
| <div class="first-static-box"></div> |
| <div class="second-static-box"></div> |
| </div> |
| |
| </body> |
| |
| </html> |
