scrimba
Applied Visual Design
Change the Position of Overlapping Elements with the z-index Property
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Change the Position of Overlapping Elements with the z-index Property
AboutCommentsNotes
Change the Position of Overlapping Elements with the z-index Property
Expand for more info
index.html
run
preview
console
<style>
div {
width: 60%;
height: 200px;
margin-top: 20px;
}

.first {
background-color: red;
position: absolute;

}
.second {
background-color: blue;
position: absolute;
left: 40px;
top: 50px;
z-index: 1;
}
</style>

<div class="first"></div>
<div class="second"></div>
Console
index.html
-0:59