| <!DOCTYPE html> |
| <style> |
| .multicol { |
| width: 60px; |
| -webkit-column-width: 20px; |
| -webkit-column-gap: 0; |
| column-fill: auto; |
| height: 60px; |
| line-height: 20px; |
| } |
| .square { |
| width: 20px; |
| height: 20px; |
| background: red; |
| } |
| .layer { transform: translateY(20px); will-change: transform; } |
| .layer .square { background: green; } |
| </style> |
| |
| <p>There should be two small green squares vertically aligned below, and another red square to the top-right. The second green square does not overlap the red because it is conmposited, and hence not fragmented.</p> |
| <div class="multicol"> |
| <br> |
| <br> |
| <br> |
| <br> |
| <br> |
| <div class="layer"> <!-- from second to third column --> |
| <div class="square"></div> |
| <br> |
| <div class="square"></div> |
| </div> |
| <div class="square"></div> |
| </div> |
