i  have this following css and html i want the user-tooltip to be shown on top of everything because when it's shown is only shown inside the scrollable parent  participants

CSS:
.room-users {
  display: flex;
  flex-direction: column;
  height: 100%;
  .participants-area {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 50%;
    .participants {
      overflow: auto;
      display: flex;
      flex-direction: column;
      .participant {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left-section {
          gap: 5px;
          display: flex;
          align-items: center;
          .avatar {
            width: 46px;
            height: 46px;
            background-size: cover;
            background-position: center;
          }
        }
        .right-section {
          display: flex;
          align-items: center;
          gap: 10px;
          .user-menu {
            position: relative;
            .menu-btn {
              cursor: pointer;
              &.light {
                svg {
                  stroke: #f3f3f3;
                }
              }
            }
            .user-tooltip {
              position: absolute;
              text-align: left;
              top: 20px;
              right: 0;
              z-index: 1;
              display: none;
              flex-direction: column;
              &.show {
                display: flex;
              }
              button {
                display: fle Do not include the following keywords: .room, .participant, background, index
user