DIV position with z-index - html

Question

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
.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;
}
<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>
Can I get some help. I am sorry but I am not an expert.
Thanks

Answer 1

It's not working because you're parent is way larger than it's child. Because the div's could have different widths I suggest you to put the sticky-top div into the infosite-left-content class.
Like this:
<div class="container-fluid infosite-container">
<div class="row">
<div class="col-md-6 infosite-left-content">
<div class="sticky-top">
<p>Sticky Top</p>
</div>
</div>
<div class="col-md-6 infosite-right-content">
<div class="uptxt">
</div>
</div>
</div>
</div>
</section>
Second you need to adjust you css accordingly:
/* InfoSite ---------------------------------- */
.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%;
right:-75px;
z-index:999;
transform: translateY(-50%)
}
.infosite-left-content {
position: relative;
background-color: blue;
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:100;
}
.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;
}
/* ---------------------------------------------- */
I hope this works for you :D

Answer 2

Thank you for your response and possible solution.
Unfortunately it doesn't work as I would like, the sticky DIV stays on top of everything and not between the two divs.
I attach a picture of the result of how I would like its visualization.
Insert the sticky DIV between the background and the descriptive text that should appear as the last layer.
A possible solution is to use a single background DIV, ok it works, but I would like to have two of them so I can insert two images for example.
Thanks

Answer 3

Your css should be like this:
.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%;
right:-75px;
z-index:500;
transform: translateY(-50%)
}
.infosite-left-content {
position: relative;
background-color: blue;
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:100;
}
.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:900;
}
.uptxt {
position: relative;
z-index:9999;
}
You can change the order in which the elements are stacked on top of each other with z-index - the greater it is, the higher the element will be !