Making absolute section-CodePudding

I made a navbar and sections but when i try to make center section absolute, it gets ahead of my navbar. I want centersection to stay just between the other sections not behind or ahead of navbar.

.left-section {
  position: fixed;
  left: 0;
  background-color: $color-primary;
}

.center-section {
  position: absolute;
  display: flex;
  background-color: $color-primary;
  left: 30%;
  width: 40%;
}

.right-section {
  position: fixed;
  right: 0;
  background-color: $color-primary;
}

<div >
  <div >

  </div>
  <div >

  </div>
  <div >

  </div>
</div>

CodePudding user response：

I would stay away from using position: fixed; or absolute; unless it's absolutely needed. In the case of your navbar, flex does the job well.

.t-container {
  outline: solid 1px black;
  display: flex;
  justify-content: space-between;
}

.left-section,
.center-section,
.right-section {
  background-color: #ebebeb;
}

.center-section {
  flex-basis: 40%;
}

<div >
  <div >
    nav1
  </div>
  <div >
    nav2
  </div>
  <div >
    nav3
  </div>
</div>