<style> | |
.change-1 .item1 { | |
display: grid; | |
} | |
.change-1 .item2 { | |
position: absolute; | |
} | |
.change-1 .item3 { | |
width: 100%; | |
} | |
.change-1 .item4 { | |
width: 50%; | |
} | |
.change-2 .item1 { | |
position: absolute; | |
} | |
.change-2 .item2 { | |
position: relative; | |
} | |
.change-3 .item2 { | |
display: flex; | |
} | |
.change-3 .item3 { | |
display: grid; | |
} | |
</style> | |
<div class="container"> | |
<div class="item item1"></div> | |
<div class="item item2"></div> | |
<div class="item item3"></div> | |
<div class="item item4"></div> | |
</div> |