DIV position with z-index

user_15033337 0
Viewed 59

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>

enter image description here Can I get some help. I am sorry but I am not an expert. Thanks

z-index html
3 Answers

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

user_95089360

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. Thanksenter image description here

user_150333370

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 !

user_149099800
Related