column-negative-margin-001-ref.html (677B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 </style> 5 <body> 6 <p>When an item with negative margins are placed, ensure the items after it are placed immediately behind it</p> 7 <div style="display: flex; flex-direction: column; width: 50px;"> 8 <div style="background: aquamarine; height: 50px;" > 9 item 1 10 </div> 11 <div style="background: aquamarine; height: 50px;" > 12 item 1 13 </div> 14 <div style="background: aquamarine; height: 50px;" > 15 item 1 16 </div> 17 <div style="background: lightblue; height: 50px; margin-top: -100px;" > 18 item 2 19 </div> 20 <div style="background: lightpink; height: 50px;"> 21 item 3 22 </div> 23 </div> 24 </body> 25 </html>