CSS Display and Positioning, Exercise 3


In exercise 3 of CSS course there is a task to offset divs with ‘question’ class by 40px from the top to their relative position. There are total of 5 divs with that class, but I only notice the first one getting the offset while the others are unaffected. Shouldn’t each element with said class move accordingly?
Thanks in advance!


they all move down.

lets say we only add the top: 40px to the first question:

<!-- simple id to only target the first question -->
<div class="question" id="question">
    <h4>Question 1</h4>

/* css */
.question {
  text-align: center;
  position: relative; 
#question {
  top: 40px;

you will see overlap between bottom of question 1 and top of question2.

this is how position relative works, first all elements are placed on the webpage, and then they are pushed down 40px, which means the gap between the bottom of question 1 and the top of question 2 stays the same.


Thank you for clarification!