Relative position with top:240px doesn't create space between each div


#1

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/courses/learn-html-css/lessons/layout/exercises/position-relative?action=lesson_resume&link_content_target=interstitial_lesson

I am confused by the positon: relative property’s behavior. As I understand it, using this with top: 240px should cause the element to be positioned 240px below where it normally would. In the code below, the first div that uses the “question” class is moved down 240px. However, the subsequent divs using the “question” class do not have 240px of spacing between them. Why does top: 240px not create space between each div using the “question” class?

.question {
  margin: 120px auto;
  text-align: center;
  position: relative;
  top: 240px;
}

 <div class="question">
    <!-- 240px below previous content -->
  </div>
  <div class="question">
        <!-- does not have the same space between it and the previous question -->
  </div>

**Edit: ** Here’s a complete example. Why are there not spaces between the boxes?
https://www.w3schools.com/code/tryit.asp?filename=FIKYSELBW7BW


#2
.question {
  margin: 120px auto;
  text-align: center;
  position: relative;
  top: 240px;
}
div.question {
  top: 240px;
}

top-240px

There is the 240px gap.

On closer examination, that has no effect. The gap is due to the top and bottom margin on .question. Not really sure what the author is trying to point out, here.


#3

@mtf , I think that gap is mostly from the 120px margin. See below where I add an 840px gap and it definitely doesn’t show as that large (although the first question starts very low on the page).

You can also see what I’m talking about here, where I would expect there to be gaps between the boxes.
https://www.w3schools.com/code/tryit.asp?filename=FIKYSELBW7BW

I’m new to web development, so thank you for the help!


#4

Just edited my post, as I discovered the same thing as you.

The only effect I can see that line having is pushing the first question div down so it is not under the welcome banner.


#5

The only effect I can see that line having is pushing the first question div down so it is not under the welcome banner.

@mtf, right. Do you have any idea why it only pushes down the first question and not the other questions? I’m scratching my head.


#6

You and me, both. Will need to do some comparative testing with margin and top. Suggest working with barebones HTML in your own environment. We don’t know how much stuff is running behind the exercise.


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.