Position:relative


#1

Why when you set relative position to top 40px for the .question class, only the first tag is moved 40 pixels lower, but not all the other tags that use the same exact class?

https://www.codecademy.com/courses/learn-css-display-positioning/lessons/css-display-positioning/exercises/css-position-relative?action=resume_content_item&course_redirect=learn-css


#2

actually, they all move. You can see this if you give the first question an id:

<div class="question" id="question">

and then only apply top: 40px to the id:

.question {
  text-align: center;
  position: relative;
  
}
#question {
  top: 40px;
}

you will see overlap between bottom of question1 and top of question2.


#3

Now i get it. Yes they all move relatively to their original position, so that’s why also the rest of the question tags don’t move 40px lower relatively to the previous question tag. Makes sense! :slight_smile:

Thank you!


#4

yep, exactly. I didn’t explain much, but you reached the conclusion yourself, in my opinion, that is even better :slight_smile: