Thanks to CSS grid, overlapping elements on a web page is easy and reliable, unlike the earlier methods that were fraught with pitfalls.
Here’s a short screencast that shows you how. Below the video are an image of the final outcome and the HTML and CSS code.
Video
Desired Outcome
HTML
<body>
<div class="wrapper">
<div class="box box-1"><span>Transition</span></div>
<div class="box box-2"><span>Transform</span></div>
<div class="box box-3"><span>Animate</span></div>
</div>
</body>
CSS
body {
background: inherit;
font-family: Lato, Helvetica, sans-serif;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0.5rem;
width: 600px;
margin-inline: auto;
margin-block-start: 1rem;
}
.box {
grid-row-start: 1;
grid-row-end: 1;
width: 100%;
border-radius: 50%;
padding: 0;
aspect-ratio: 1;
color: white;
}
.box-1 {
grid-column-start: 1;
grid-column-end: 3;
background-color: green;
}
.box-2 {
grid-column-start: 2;
grid-column-end: 4;
background-color: red;
z-index: 10;
}
.box-3 {
grid-column-start: 3;
grid-column-end: 5;
background-color: blue;
}
Even fewer lines by using grid-column shorhand
body {
background: inherit;
font-family: Lato, Helvetica, sans-serif;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0.5rem;
width: 600px;
margin-inline: auto;
margin-block-start: 1rem;
}
.box {
grid-row: 1;
width: 100%;
border-radius: 50%;
padding: 0;
aspect-ratio: 1;
color: white;
}
.box-1 {
grid-column: 1 / 3;
background-color: green;
}
.box-2 {
grid-column:: 2 / 4;
background-color: red;
z-index: 10;
}
.box-3 {
grid-column: 3 / 5;
background-color: blue;
}
Like what you see? Share with others and join my mailing list. No long-term commitment, unsubscribe any time.
Leave a Reply