Position: Relative


#1

During the exxersise 4 we were changing relative postition if the element .question to relative and setting offset top to 20px. But it only changed position of the question 1. Altough all questions had class .question. Why tho?


#2

actually the offset applied to all elements, i could demonstrate this but you provided no code and no exercise url, so its difficult to craft an example.

so here is what you can do to prove the offset applied to all elements, you give the first question an id:

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

then remove top: 20px; from .question and apply the it to #prove:

#prove {
   top: 20px;
}

now you will see overlap between bottom of first question and top of second question

here is the thing with top, first the elements are positioned on the page, then they are all pushed down 20px, making it look like only the first element has moved down


#3

Thank you.
URL: 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

I think, I got it: we moved 20px the whole box with .questions, right?


#4

nope, that is not the case.

if you implement my suggestion:

  <div class="question" id="question">
    <h4>Question 1</h4>
    <h2>I like participating in physical activity such as running, swimming, or biking.</h2>

    <div class="answer">
      <h3>Disagree</h3>
    </div>

    <div class="answer">
      <h3>Neutral</h3>
    </div>

    <div class="answer">
      <h3>Agree</h3>
    </div>
  </div>
.question {
  text-align: center;
  position: relative;
  
}
#question {
  top: 20px;
}

you can now see overlap, so this proves that you don’t move the whole box

top is applied after the elements are on the page, so all .questions move down 20px, keeping there relative distance to each other, so only a gap becomes visible above the first question.