How to position fixed a div inside div

Question

I am trying to create a fixed div for my menu but when I position: fixed it it will go outside a div that contain it.

Here is my following code:

<div className="team-management">
  <div className="test">
    <div className="team-management-tabs-header">
      <div className="team-management-tab-items">
        {tabs.map((tab, index) => (
          <div
            id={editable === true ? "" : `${tab}`}
            <span className="tab-item-text">{tab}</span>
            <span className="tab-item-indicator" />
          </div>
        ))}
      </div>
    </div>
  </div>

css file:

.team-management {
  width: 100%;
  position: relative;
  margin: 0;
  border: 1px solid red;
}

.test {
  border: 1px solid blue;
  // position: fixed;
}

.team-management-tabs-header {
  position: relative;
  width: 100%;
  &::after {
    position: absolute;
    content: "";
    background-color: #d8d8d8;
    height: 1px;
    width: 100%;
    bottom: 2px;
    z-index: 0;
  }
}

.team-management-tab-items {
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding: 0 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

Here is my project look like:

How can I make the menu fixed inside a div?