html - 如何在css中将一个容器放在另一个容器之上（而不是顶部）？

Question

我需要将带有“hello”的白色容器放置在主问题容器上方......如果您运行下面的代码片段，现在“hello”容器位于主问题容器的一侧。我该怎么做呢？我不知道如何添加更多细节，所以不要费心阅读这个......我只是想填写更多的话，以便我可以发布这个问题。

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>

标签： htmlcss

Answer 1

编辑：对于您更新的问题，请执行以下操作：

添加 font-size: 0.8em;到

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

并top:20%; position:absolute;_.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;
  }

示例： https ://codepen.io/pr0cz/pen/zYrevRm