Как сделать,чтобы блок не наезжал на header?

Question

Как сделать,чтобы div plusesConteners был ниже firstblock,а не накладывался на header?

.mainblock{
  position:absolute;
  top:65px;
  display:flex;
  justify-content:center;
  background:rgba(0, 0, 0, 0.9);
  width: 100vw;
  height:90vh;
  left: 0;
}

.header{
  background-color:rgba(0, 0, 0, 0.9);
  width:100%;
  height:65px;
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:flex-start;
  gap:32px;
  top:0;
  left:0;
  position:fixed;
  z-index:3;
}

.headerblock{
  display:block;
}

.firstblock{
  display:block;
}

.plusesConteners{
  display:flex;
  direction:column;
}

<div class = 'firstscreen'>
  <div class="headerblock">
    <div class = 'header'>
  </div>
  <div class="firstblock">
    <div class="mainblock">...</div>
  </div>
  <div class="plusesConteners">
    <div class="facts">
      <h1>1</h1>
      <h4>Fast connect to other players</h4>
    </div>
    <div class="facts">
      <h1>2</h1>
      <h4>Detailed statistics during the quiz</h4>
    </div>
    <div class="facts">
      <h1>3</h1>
      <h4>Quickly create quizzes using ready-made or entirely your own options</h4>
    </div>
  </div>
</div>

Answer 1

Я пошел по пути объединения двух блоков firstblock и plusesConteners и добавление отступа родительскому блоку, так как у вас известна высота header то ее и добавляем в отступ

  .mainblock{
  position:absolute;
  top:65px;
  display:flex;
  justify-content:center;
  background:rgba(0, 0, 0, 0.9);
  width: 100vw;
  height:90vh;
  left: 0;
}

.header{
  background-color:rgba(0, 0, 0, 0.9);
  width:100%;
  height:65px;
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:flex-start;
  gap:32px;
  top:0;
  left:0;
  position:fixed;
  z-index:3;
}

.headerblock{
  display:block;
}

.firstblock{
  display:block;
  height: 5rem; /*Высоту добавил что бы было видно блок*/
  background-color:red; /*Цвет добавил что бы было видно блок*/
}

.plusesConteners{
  display:flex;
  direction:column;
}
/*Новый класс*/
.firstblock_plusesConteners {
  display: flex;
  flex-direction: column;
  margin-top: 65px;
}

 <div class = 'firstscreen'>
    <div class="headerblock">
      <div class = 'header'>
    </div>
    <div class="firstblock_plusesConteners">
      <div class="firstblock">
        <div class="mainblock">...</div>
      </div>
      <div class="plusesConteners">
        <div class="facts">
          <h1>1</h1>
          <h4>Fast connect to other players</h4>
        </div>
        <div class="facts">
          <h1>2</h1>
          <h4>Detailed statistics during the quiz</h4>
        </div>
        <div class="facts">
          <h1>3</h1>
          <h4>Quickly create quizzes using ready-made or entirely your own options</h4>
        </div>
      </div>
    </div>
  </div>

БЛОГ НА HUSL

Как сделать,чтобы блок не наезжал на header?

Ответы (1 шт):