вопрос о позициях в html и css

Question

Ожидается

Положение: фиксированное

[

Удалить позицию: исправлено

[

my html

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

.container-fluid .wrapper {
  display: flex;
    position: relative;
}

.container-fluid .wrapper .sidebar {
  position: fixed;
  width: 200px;
  height: 100%;
  background: #4b4276;
  padding: 30px 0;
}

<div class="container-fluid">
  <div class="wrapper">
    <div class="sidebar">
      <h2>Paperpay</h2>
      <ul>
        <li><a href="#"><i class="fas fa-file-invoice"></i>Statements</a></li>
        <li><a href="#"><i class="fas fa-users"></i>Profile</a></li>
        <li><a href="#"><i class="far fa-newspaper"></i>Newspapers</a></li>
      </ul>
    </div>
    <div class="main_content">
      <div class="header">Welcome to Paper Pay</div>
      <div class="info">
        welcom to info
      </div>
    </div>
  </div>
</div>

и когда использовать позицию **, новую для css, помогите мне достичь своей цели, которая является новым для пользовательского интерфейса, css, помогите мне достичь моей цели, которая UI **

Answer 1

Вы ссылаетесь на display: flex, но, кажется, не используете его на самом деле.

Один быстрый способ избавиться от display: flex, если вы его не используете, и оставить main_content левое поле больше или равна ширине боковой панели.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

.container-fluid .wrapper {
    position: relative;
}

.container-fluid .wrapper .sidebar {
  position: fixed;
  width: 200px;
  height: 100%;
  background: #4b4276;
  padding: 30px 0;
}

.main_content{
margin-left:200px;
}

<div class="container-fluid">
  <div class="wrapper">
    <div class="sidebar">
      <h2>Paperpay</h2>
      <ul>
        <li><a href="#"><i class="fas fa-file-invoice"></i>Statements</a></li>
        <li><a href="#"><i class="fas fa-users"></i>Profile</a></li>
        <li><a href="#"><i class="far fa-newspaper"></i>Newspapers</a></li>
      </ul>
    </div>
    <div class="main_content">
      <div class="header">Welcome to Paper Pay</div>
      <div class="info">
        welcom to info
      </div>
    </div>
  </div>
</div>