In the sample code, when I clicked the Show button, I got the location of the orange diva I needed (3) in relation to the diva (1) just below the diva's upper bound (1).

enter image description here

But if the content in divas 1, or 2 will stretch them down, then the arrangement I need diva_3 will eat. In the code example, div (3) comes after the first two. If you do it first:

<div id="v" style="display:none; margin-top:-255px; margin-left:12px;"> 3</div> <div style="width:350px; height:125px; background-color:silver;"> 1</div> <div style="width:350px; height:125px; background-color:grey;"> 2</div> <input type="button" value="Показать" style="width:173px;" onclick="f1()"> <input type="button" value="Скрыть" style="width:173px;" onclick="f2()">

then how to specify the styles, so as not to depend on the changing heights of divs 2 and 3? Well, the negative margin-top heard what to do wrong. Correct, please.

Code example:

 function f1() { // Показать document.getElementById('v').style.display = 'block'; } function f2() { // Скрыть document.getElementById('v').style.display = 'none'; } 
 #v { position:relative; z-index:5; width: 180px; height:180px; background: orange; } 
 <div style="width:350px; height:125px; background-color:silver;"> 1</div> <div style="width:350px; height:125px; background-color:grey;"> 2</div> <input type="button" value="Показать" style="width:173px;" onclick="f1()"> <input type="button" value="Скрыть" style="width:173px;" onclick="f2()"> <div id="v" style="display:none; margin-top:-255px; margin-left:12px;"> 3</div>

  • one
    jsfiddle.net/soledar10/f55qyx4z - soledar10
  • Yes, cool, I digest your example solution ... - Alex
  • @ soledar10, your code works fine, thank you very much for your help. - Alex

1 answer 1

So that the third block does not depend on the height of the first block, you can:

  1. assign relative positioning to the first block;
  2. position the third block absolutely and place it inside the first block.

Then the position of the third block will be calculated relative to the boundaries of its parent. Next, top , left and transform to taste:

  • top: 15px; = 15 pixels below the top of the first block
  • left: 15px; = 15 pixels from the left edge

 COLLECTION_V3 = document.getElementsByClassName('v3'); function f1() { // Показать for (var i = 0; i < COLLECTION_V3.length; i++) { COLLECTION_V3[i].style.display = 'block'; } } function f2() { // Скрыть for (var i = 0; i < COLLECTION_V3.length; i++) { COLLECTION_V3[i].style.display = 'none'; } } 
 .v1, .v2 { position: relative; width: 350px; max-width: 350px; min-height: 125px; } .v1 { background: silver; } .v2 { background: grey; } .v3 { display: none; position: absolute; top: 15px; left: 15px; /* transform: translate(-50%, -50%); */ z-index:5; width: 180px; height:180px; background: orange; } 
 <div class="v1">1 <div class="v3">3</div></div> <div class="v2">2 </div> <div class="v1">1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <br>1 <div class="v3">3</div></div> <div class="v2">2 </div> <input type="button" value="Показать" style="width:173px;" onclick="f1()"> <input type="button" value="Скрыть" style="width:173px;" onclick="f2()">

  • Thanks for the help, you need without jquery ... - Alex
  • one
    @Alex Here, jQuery handles button presses only. It is possible without him. The essence of the answer does not change. - Gleb Kemarsky
  • one
    @Alex Removed jQuery from the response. - Gleb Kemarsky
  • Here, in your example, I changed the height of divs 1 and 2 from 125px to 225px and received div_3 at the output not in the previous position, but lower. But it is necessary that this orange div_3 always appear in the same place, when the height of divines 1 and 2 changes. - Alex
  • one
    @Alex Please note that I moved the third block from the second to the first. If problems persist, give a link to the fidl. - Gleb Kemarsky pm