Positioning navigation buttons inside a slider (owl-carousel)?

Question

css

Hello, I made a slider on the site, but I don’t understand how to position the navigation buttons inside the slider itself. I tried with position: relative/absolute, but apparently I'm doing something wrong, help me figure it out.
Here's how it's done:

Like mine:

My code:

<section class="portfolio">
    <div id="slider__cintainer" class="owl-carousel">
      <div><img src="img/img1.png" alt="Works"></div>
      <div>
        <img src="img/img2.png" alt="Works">
      </div>
      <div><img src="img/img3.png" alt="Works"></div>
      <div><img src="img/img2.png" alt="Works"></div>
      <div><img src="img/img3.png" alt="Works"></div>
      <div><img src="img/img1.png" alt="Works"></div>
      <div><img src="img/img3.png" alt="Works"></div>
      <div><img src="img/img1.png" alt="Works"></div>
      <div><img src="img/img2.png" alt="Works"></div>
    </div>
    </div>
  </section>

.owl-carousel{
  position: relative;
}

.owl-nav{
  position: absolute;
  display: flex;
  justify-content: space-between;
}

And yes, who knows how to make text on top of the slider as in the first picture, write too)

Answer 1

I solved the problem in this way, I think I'm not the first and I'm not the last to encounter such a problem, so use it.

.owl-carousel .owl-stage-outer {
  position: relative;
}

 .owl-nav {
  position: absolute;
  width: 100%;
  height: 0px;
  top: 40%;
  z-index: 999;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}

Answer 2

It's lazy to code, here's an example: https://freakyjolly.com/demo/jquery/OwlCarousel2/
Back and forth buttons are separate elements. .owl-nav is their wrapper, and inside they have their own .nav-btn back and forth. Those. two more blocks. Just the same, .nav-btn needs to be positioned through position: absolute. Left and right.