Tell us what’s happening:
I can do the challenge in the description it say "the element coming later in the HTML markup will, by default, appear on the top of the other elements. " which as I though HTML read from bottom to top it would mean the red would be on top but blue is, so does HTML read from top to bottom or am I missing something obvious?
Thanks
Your code so far
<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>
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
.
Challenge: Change the Position of Overlapping Elements with the z-index Property
Link to the challenge: