Good morning everyone
How can I place the different DIVs on top of each other?
I have a row that contains left and right DIVs.
In the right I have image and in the left text.
I also have a DIV that needs to be placed between the text and the background.

I've tried and gotten a few things, but I can't get the right DIV sticky-top in the right place.

I don't want to use Java but only CSS

```css
.infosite-container {
  margin: 0 auto;
  width: 100%;
  position: relative;
}

.infosite-container .row {
  display: table;
}

.infosite-container [class*="col-"] {
  float: none;
  display: table-cell;
  vertical-align: top;
}

.sticky-top {
  height: 150px;
  width: 150px;
  position: absolute;
  background: red;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
}

.infosite-left-content {
  padding-top: 175px;
  padding-bottom: 175px;
  padding-left: 120px;
  text-align: left;
  background-image: url(../../images/img-01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 680px;
  /* height: 680px; */
  z-index: 99;
}

.infosite-right-content {
  padding-top: 175px;
  padding-bottom: 175px;
  padding-right: 120px;
  padding-left: 60px;
  text-align: left;
  background-color: #bebebe;
  min-height: 680px;
  /* height: 680px; */
  position: relative;
  z-index: 99;
}

.uptxt {
  position: relative;
  z-index: 9999;
}
```

```html
<section class="infosite" id="infosite-section">
  <div class="container-fluid infosite-container">
    <div class="row">
      <div class="col-md-6 infosite-left-content">
        <div class="">
        </div>
      </div>
      <div class="sticky-top">
        <p>Sticky Top</p>
      </div>
      <div class="col-md-6 infosite-right-content">
        <div class="uptxt">
        </div>
      </div>
    </div>
  </div>
</section>
```

![enter image description here](https://i.stack.imgur.com/hthot.png)
Can I get some help. I am sorry but I am not an expert.
Thanks