CODEWITHSUNDEEP
javascriptjquerycsshtml
Rahul aman
Rahul aman

Reputation: 379

how to get a div relative to another div but with z-index

hello all please look at the image below enter image description here

The problem that i am having is very simple and common i am having div 1, div2 and div3 in a loop div 1 and div 2 is visible but divs 3 are hidden all the div with no 3 are hidden and it shows when on clicked on div2 everything is great till now the issue what i am havving is that i want something like this.

enter image description here

please ignore the colors what i want is that div3 should adjust it self to the best availabe position and space if there is no space in the left side get to the right or top or bottom it should auto adjust just like title of any thing in default settings.

what i have tried to do is something like 

  <div> // div1
     <div> //div 2
         <div class='div3'> //div 3
         </div>
     </div>
  </div>

CSS

    .div3 {position:absolute;right:0px;}

please tell me something about this

Upvotes: 1

Views: 120

Answers (1)

Persijn
Persijn

Reputation: 14990

I think this is the problem your experiencing right?
They gray tiles are behind the black ones take a look:

.div1 {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #222;
}
.div2 {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #ee2;
  top: 60%;
  left: 60%;
}
.div3 {
  position: absolute;
  width: 50%;
  height: 50%;
  display: inline-block;
  background-color: gray;
  left: 100%;
  top: 80%;
}
<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>
<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

The solution is pretty simple: If you add a z-index of more then 1 its fixed.
I added a z-index of 5.

.div1 {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #222;
}
.div2 {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #ee2;
  top: 60%;
  left: 60%;
}
.div3 {
  position: absolute;
  width: 50%;
  height: 50%;
  display: inline-block;
  background-color: gray;
  left: 100%;
  top: 80%;
  z-index: 5;
}
<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>
<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

Upvotes: 1

Related Questions