Is there a way to achieve the same layering effect as using absolute positioning with div elements one, two, and three, while always displaying div.main, by utilizing CSS grid?
div.mainis always visibledivone,two,threewill appear when necessary
Update: A toggle button has been added for better visualization
const div = document.querySelector('div.content');
document.querySelector('button').addEventListener('click', () => {
const on = document.querySelector('.on');
on?.classList.remove('on');
(on?.nextElementSibling || div.firstElementChild).classList.add('on');
});* {
box-sizing: border-box;
}
button {
padding: 0.5em;
margin-bottom: 1em;
}
.content {
width: 15em;
height: 8em;
position: relative;
margin: 0;
padding: 0;
border: 1px solid #aaa;
}
.main {
height: 100%;
background: #eee;
padding: 0.5em;
}
.one,
.two,
.three {
display: none;
margin: 0;
padding: 2em;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.one.on,
.two.on,
.three.on {
display: block;
}
.one {
background: #fef8;
}
.two {
background: #fec8;
}
.three {
background: #cdc8;
}<button>Toggle</button>
<div class="content">
<div class="main on">This is main</div>
<div class="one">This is one</div>
<div class="two">This is two</div>
<div class="three">This is three</div>
</div>