How to put a container above the other (not over top) in css?

Question

I need to position white container with the "hello" to be above the main question container... right now the "hello" container is to the side of the main question container if you run the code snippet below. How do I do this? I don't know how to add more details so don't bother reading this... I'm just trying to fill in more words so I can publish this question.

const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const image1 = document.getElementById('image1')
const answerButtonsElement = document.getElementById('answer-buttons')
const startwords = document.getElementById('startmsg')
const endbutton = document.getElementById('end-btn')
const trybutton = document.getElementById('try-btn')

let shuffledQuestions, currentQuestionIndex

startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
  currentQuestionIndex++
  setNextQuestion()
})
endbutton.addEventListener('click', () => {
  window.top.close()
})

trybutton.addEventListener('click', setNextQuestion)

function showwords (startwords) {
  questionElement.innerText = startwords.startwords

}
function startGame() {
  startButton.classList.add('hide')
  startwords.classList.add('hide')
  shuffledQuestions = questions.slice()
  questionContainerElement.classList.remove('hide')
  currentQuestionIndex = 0
  setNextQuestion()
}

function setNextQuestion() {
  resetState()
  showQuestion(shuffledQuestions[currentQuestionIndex])
}

function showQuestion(question) {
  questionElement.innerText = question.question
  question.answers.forEach(answer => {
    const button = document.createElement('button')
    button.innerText = answer.text
    button.classList.add('btn')
    if (answer.correct) {
      button.dataset.correct = answer.correct
    }
    button.addEventListener('click', selectAnswer)
    answerButtonsElement.appendChild(button)
  })
}

function resetState() {
  clearStatusClass(document.body)
  nextButton.classList.add('hide')
  while (answerButtonsElement.firstChild) {
    answerButtonsElement.removeChild(answerButtonsElement.firstChild)
  }
  trybutton.classList.add('hide')
}

function selectAnswer(e) {
  const selectedButton = e.target
  const correct = selectedButton.dataset.correct
  setStatusClass(document.body, correct)
  Array.from(answerButtonsElement.children).forEach(button => {
    setStatusClass(button, button.dataset.correct)
  })
  if(correct){
    if (shuffledQuestions.length > currentQuestionIndex + 1) {
      nextButton.classList.remove('hide')
    } else {
      endbutton.classList.remove('hide')
    }
  } else{
     trybutton.classList.remove('hide')
  }
}

function setStatusClass(element, correct) {
  clearStatusClass(element)
  if (correct) {
    element.classList.add('correct')
  } else {
    element.classList.add('wrong')
  }
}

function clearStatusClass(element) {
  element.classList.remove('correct')
  element.classList.remove('wrong')
}

function blank() {
  if (question == '') {
    image1.classList.remove('hide')
  }

}
const questions = [
  {
    question: 'What is 4+2?',
    answers: [
      { text: '1', correct: false },
      { text: '2', correct: false },
      { text: '3', correct: false },
      { text: '6', correct: true }
    ]
  },
  {
    question: 'What is 4 * 2?',
    answers: [
      { text: '6', correct: false },
      { text: '8', correct: true }
    ]
  },  
]

*, *::before, *::after {
    box-sizing: border-box;
    font-family: cursive,
    'Times New Roman', Times, serif
  }
  
  #particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    /* background-color: #b61924; */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 1;
  }
  
  :root {
    --hue-neutral: 200;
    --hue-wrong: 0;
    --hue-correct: 145;
  }

  body {
    --hue: var(--hue-neutral);
    padding: 0;
    margin: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: hsl(var(--hue), 100%, 20%);
  }

  body.correct {
    --hue: var(--hue-correct);
  }
  
  body.wrong {
    --hue: 0;
  }
  
  .container {
    width: 800px;
    max-width: 80%;
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 10px 2px;
    z-index: 2;
  } 
  
  .btn-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px;
    margin: 20px 0;
  }
  
  .btn {
    --hue: var(--hue-neutral);
    border: 1px solid hsl(var(--hue), 100%, 30%);
    background-color: hsl(var(--hue), 100%, 50%);
    border-radius: 5px;
    padding: 5px 10px;
    color: white;
    outline: none;
  }
  
  .btn:hover {
    border-color: black;
  }
  
  .btn.correct {
    --hue: var(--hue-correct);
    color: black;
  }
  
  .btn.wrong {
    --hue: var(--hue-wrong);
  }
  
  .next-btn {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
    align-items: flex-end;
    --hue: 245;
  }

  .start-btn {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
    --hue: 245;
  }

  .end-btn {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
    --hue: 245;
  }

  .try-btn {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
    --hue: 245;
  }

  .container1 {
    display: flex;
    justify-content: center;
    align-items: center; 
    font-family: Arial;
    font-size: xx-large;
    padding: 10px 10px;

  }
  
  .container2 { 
    width: 800px;
    max-width: 80%;
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 10px 2px;
  }
  .controls {
    display: flex;
    justify-content: center;
    align-items: center; 
  }
  
  .hide {
    display: none;
  }

  .wrapper { 
      position: absolute;
      top: 0px;
      right: 0px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <script defer src="script.js"></script>
   <title>Quiz App</title>
</head>
<body>
  </div>
  <div class="container">
    <div id="question-container" class="hide">
      <div id="question">Question</div>
      <div id="answer-buttons" class="btn-grid">
        <button class="btn">Answer 1</button>
        <button class="btn">Answer 2</button>
        <button class="btn">Answer 3</button>
        <button class="btn">Answer 4</button>
      </div> 
    </div>
    <div class="container1">
      <div id="startmsgcontainer" class="hide"></div>
        <div id="startmsg">Adventure Into The Human Immune System</div>
        </div>
    <div class="controls">
      <button id="start-btn" class="start-btn btn">Start!</button>
      <button id="next-btn" class="next-btn btn hide">Next</button>
      <button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button>
      <button id="try-btn" class="try-btn btn hide">Try again!</button>
    </div>
  </div>
  <div class="wrapper">
      <img src="img/uni.png" alt="image">
  </div>
  <div class="container2">
    <div id="imgcontainer">hello</div>
    <div id="image1" class="hide">
      <img src="img/wantedvirus.png" alt="image1">
  </div>
  </div>
 </div> 
  <div id="particles-js"></div>
  <script src="particles.js"></script>
  <script src="app.js"></script>
</body>
</html>

Answer 1

just reposition in the html container2

var startButton = document.getElementById('start-btn');

const questions = [
  {
    question: 'What is 4+2?',
    answers: [
      { text: '1', correct: false },
      { text: '2', correct: false },
      { text: '3', correct: false },
      { text: '6', correct: true }
    ]
  },
  {
    question: 'What is 4 * 2?',
    answers: [
      { text: '6', correct: false },
      { text: '8', correct: true }
    ]
  },  
]

const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const image1 = document.getElementById('image1')
const answerButtonsElement = document.getElementById('answer-buttons')
const startwords = document.getElementById('startmsg')
const endbutton = document.getElementById('end-btn')
const trybutton = document.getElementById('try-btn')

let shuffledQuestions, currentQuestionIndex 

startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
  currentQuestionIndex++
  setNextQuestion()
})
endbutton.addEventListener('click', () => {
  window.top.close()
})

trybutton.addEventListener('click', setNextQuestion)

function showwords (startwords) {
  questionElement.innerText = startwords.startwords

} 
function startGame() {
console.log('hello');
  startButton.classList.add('hide')
  startwords.classList.add('hide')
  shuffledQuestions = questions.slice()
  questionContainerElement.classList.remove('hide')
  currentQuestionIndex = 0
  setNextQuestion() 
}

function setNextQuestion() {
  resetState()
  showQuestion(shuffledQuestions[currentQuestionIndex])
}

function showQuestion(question) {
  questionElement.innerText = question.question
  question.answers.forEach(answer => {
    const button = document.createElement('button')
    button.innerText = answer.text
    button.classList.add('btn')
    if (answer.correct) {
      button.dataset.correct = answer.correct
    }
    button.addEventListener('click', selectAnswer)
    answerButtonsElement.appendChild(button)
  })
}

function resetState() {
  clearStatusClass(document.body)
  nextButton.classList.add('hide')
  while (answerButtonsElement.firstChild) {
    answerButtonsElement.removeChild(answerButtonsElement.firstChild)
  }
  trybutton.classList.add('hide')
}

function selectAnswer(e) {
  const selectedButton = e.target
  const correct = selectedButton.dataset.correct
  setStatusClass(document.body, correct)
  Array.from(answerButtonsElement.children).forEach(button => {
    setStatusClass(button, button.dataset.correct)
  })
  if(correct){
    if (shuffledQuestions.length > currentQuestionIndex + 1) {
      nextButton.classList.remove('hide')
    } else {
      endbutton.classList.remove('hide')
    }
  } else{
     trybutton.classList.remove('hide')
  }
}

function setStatusClass(element, correct) {
  clearStatusClass(element)
  if (correct) {
    element.classList.add('correct')
  } else {
    element.classList.add('wrong')
  }
}

function clearStatusClass(element) {
  element.classList.remove('correct')
  element.classList.remove('wrong')
}

function blank() {
  if (question == '') {
    image1.classList.remove('hide')
  }

}

*, *::before, *::after {
    box-sizing: border-box;
    font-family: cursive,
    'Times New Roman', Times, serif
  }
  
  #particles-js {
    position: relative;
    width: 100%;
    height: 100%;
    /* background-color: #b61924; */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 1;
  }
  
  :root {
    --hue-neutral: 200;
    --hue-wrong: 0;
    --hue-correct: 145;
  }

  body {
    --hue: var(--hue-neutral);
    padding: 0;
    margin: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: hsl(var(--hue), 100%, 20%);
  }

  body.correct {
    --hue: var(--hue-correct);
  }
  
  body.wrong {
    --hue: 0;
  }
  
  .container {
    width: 800px;
    max-width: 80%;
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 10px 2px;
    z-index: 2;
  } 
  
  .btn-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px;
    margin: 20px 0;
  }
  
  .btn {
    --hue: var(--hue-neutral);
    border: 1px solid hsl(var(--hue), 100%, 30%);
    background-color: hsl(var(--hue), 100%, 50%);
    border-radius: 5px;
    padding: 5px 10px;
    color: white;
    outline: none;
  }
  
  .btn:hover {
    border-color: black;
  }
  
  .btn.correct {
    --hue: var(--hue-correct);
    color: black;
  }
  
  .btn.wrong {
    --hue: var(--hue-wrong);
  }
  
  .next-btn {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
    align-items: flex-end;
    --hue: 245;
  }

  .start-btn {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
    --hue: 245;
  }

  .end-btn {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
    --hue: 245;
  }

  .try-btn {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 20px;
    --hue: 245;
  }

  .container1 {
    display: flex;
    justify-content: center;
    align-items: center; 
    font-family: Arial;
    font-size: xx-large;
    padding: 10px 10px;

  }
  
  .container2 { 
    width: 800px;
    max-width: 80%;
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 10px 2px;
  }
  .controls {
    display: flex;
    justify-content: center;
    align-items: center; 
  }
  
  .hide {
    display: none;
  }

  .wrapper { 
      position: absolute;
      top: 0px;
      right: 0px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--<link rel="stylesheet" href="styles.css">
  <script defer src="script.js"></script> -->
   <title>Quiz App</title>
</head>
<body>
  <div>
  <div class="container2">
    <div id="imgcontainer">hello</div>
    <div id="image1" class="hide">
      <!--<img src="img/wantedvirus.png" alt="image1">-->
  </div>
  </div>
  <div class="container">
    <div id="question-container" class="hide">
      <div id="question">Question</div>
      <div id="answer-buttons" class="btn-grid">
        <button class="btn">Answer 1</button>
        <button class="btn">Answer 2</button>
        <button class="btn">Answer 3</button>
        <button class="btn">Answer 4</button>
      </div> 
    </div>
    <div class="container1">
      <div id="startmsgcontainer" class="hide"></div>
        <div id="startmsg">Adventure Into The Human Immune System</div>
        </div>
    <div class="controls">
      <button id="start-btn"  class="start-btn btn">Start!</button>
      <button id="next-btn" class="next-btn btn hide">Next</button>
      <button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button>
      <button id="try-btn" class="try-btn btn hide">Try again!</button>
    </div>
  </div>
  <div class="wrapper">
      <!--<img src="img/uni.png" alt="image">-->
  </div>
  
 </div> 
  <div id="particles-js"></div>
<!-- <script src="particles.js"></script>
  <script src="app.js"></script>-->
</body>
</html>

Answer 2

EDIT: For your updated Question do this:

Add font-size: 0.8em; to

*, *::before, *::after {
    box-sizing: border-box;
    font-family: cursive,
    'Times New Roman', Times, serif
     font-size: 0.8em;
  }

and top:20%; position:absolute; to .container2

.container2 { 
    width: 800px;
    max-width: 80%;
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 10px 2px;
    top:20%;
    position:absolute;
  }

Example: https://codepen.io/pr0cz/pen/zYrevRm

Answer 3

Codepen

You can add position: relative; to container(that makes children with position absolute to not get out of the container) and to container2 add this this lines to css:

    position: absolute;
    margin: auto;
    z-index: 3;

position: absolute; let it go over other div. margin: auto; makes it positioned to the center of the parent div. z-index: 3; to make it appear over the other divs.