Does HTML read bottom to top or top to bottom?

HTML-CSS
#1

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:

#2

HTML files read from top to bottom on the fly, that means, whatever is on the top, will run first.

#3

codrops has a pretty nice article on z-index and the stacking context

1 Like
#4

maybe you have less confusion if I change on top of with in front of

"the element coming later in the HTML markup will, by default, appear [in front] of the other elements. "

Is the sentence like this more clear?

#5

Thanks everyone, I just thought in a previous task it said something was read bottom first. This clears it up. Thank you.

#6