CSS Display and Positioning Confusion

Morning everyone.

In this code, there is a class for question that gets given a style.

my problem is, only the first div with the .question gets affected ‘top: 300px’. Why don’t the other div with .question as a class get shifted by 300px


<!DOCTYPE html>
<html>
<head>
  <title>Please Participate in Our Survey!</title>
  <link href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela+Round" rel="stylesheet">
  <link rel="stylesheet" href="exercise.css">
</head>
<body>

  <header>
    <ul>
      <li>Question 1</li>
      <li>Question 2</li>
      <li>Question 3</li>
      <li>Question 4</li>
      <li>Question 5</li>
    </ul>
  </header>
  
  <div class="welcome">
    <h1>Welcome to our survey!</h1>
    <p>We're looking forward to getting your answers so we can make sure our products and services are the best they can be!</p>
  </div>

  <div class="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>

  <div class="question">
    <h4>Question 2</h4>
    <h2>I try to keep up to date with the latest fashion in active wear.</h2>

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

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

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

  <div class="question">
    <h4>Question 3</h4>
    <h2>I purchase clothing online regularly.</h2>

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

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

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

  <div class="question">
    <h4>Question 4</h4>
    <h2>I try to buy goods that are designed and/or manufactured in my home country.</h2>

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

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

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

  <div class="question">
    <h4>Question 5</h4>
    <h2>I look to famous athletes when trying to choose what to wear when training.</h2>

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

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

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

</body>
</html>

Here is the CSS

body {
    background-color: #FFF;
    margin: 0 auto;
  }
  
  header {
    background-color: #466995;
    border-bottom: 1px solid #466995;
  }
  
  ul {
    margin: 30px auto;
    padding: 0 20px;
    text-align: center;
  }
  
  li {
    color: #FFF;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
  }
  
  li:hover {
    color: #DBE9EE;
  }
  
  h1 {
    color: #466995;
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    font-weight: 300;
    text-transform: uppercase;
  }
  
  h2 {
    color: #333;
    font-family: 'Varela Round', sans-serif;
    font-size: 26px;
    font-weight: 100;
    margin: 0 auto 20px auto;
  }
  
  h3 {
    color: #466995;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    padding: 30px;
  }
  
  h4 {
    color: #466995;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase
  }
  
  p {
    color: #333;
    font-family: 'Varela Round', sans-serif;
    font-size: 18px;
  }
  
  footer {
    background-color: #DBE9EE;
    text-align: center;
  }
  
  .welcome {
    background-color: #DBE9EE;
    box-sizing: border-box;
    padding: 40px;
    text-align: center;
    width: 100%;
  }
  
  .question {
    text-align: center;
    position: relative;
    top: 300px;
  }
  
  .answer {
    border: 1px solid #466995;
    margin: 20px;
  }
  
  .answer:hover {
    background: #C0D6DF;
    color: #FFF;
  }

Hi there!

  1. Please learn how to share your code properly:
    How do I format code in my posts?
  2. To get help you have to share your full HTML and CSS
1 Like

Ok Thanks, give me a minute please.

1 Like

Is the update code better now?

Thanks, yes, perfect! Let’s see what’s the issue is here

Well, I see what you mean, but what’s your intention? Do you want a 300px gap between the question blocks?
If so, position: relative is an inappropriate tool. Use margin-bottom or maybe margin-top, it depends on your needs.

I don’t really have an intention, i was just playing around with the code in on the fundamental of CSS section. I thought each question div would have a 300px gap but it doesn’t? Why does .question {top 300px} only work on the first div and not all the div with .question as its class

In this case you have to dive deeper into positioning. Here’s detailed guide you may find helpful:

Perhaps this will answer your question:

position: relative; changes the position of the element relative to the parent element and relative to itself and where it would usually be in the regular document flow of the page. This means that it’s relative to its original position within the parent element.

It moves the tag based on where it currently is, relative to its usual place and relative to its surrounding tags without affecting their layout.

2 Likes

Hi there!

Welcome to the forums!

I just thought I’d like to pop in with some information.

If you inspect the page, you will see that each .question is being affected by top: 300px What I think is confusing you is that relative positioning doesn’t create a gap between elements. It takes the element and then shifts its position based on its original placement. So, each .question isn’t creating a gap of 300px but is shifting down 300px from its original position.

Take this example:
image

The first set of blocks are not relatively positioned, they’re in their static original placement. The middle blocks are all relatively positioned with top: 100px and have all shifted down by 100px. If you look at the third set, the top block overlaps the middle block because they have different top values; the top one has a value of 150px and it’s important to notice that this is not causing the blocks below it to shift an additional 50px.

Going back to the lesson, I can’t quite remember what it’s leading to. I certainly wouldn’t use relative positioning to create space between elements, margins are for that, but relative positioning is great for creating the “moving-up” transition or animation when page scrolling.

2 Likes