There is a block in which 4 span and a picture. 2 span with the abs classes and the picture are permanent, and 2 span with the rel class can either be present or not, and the picture location should not change from this (should not be shifted!) And if there is no rel-1 block - rel-2 should move in his place. If there are not both rel blocks, the picture goes to the top margin-top:-50px; And this is the main problem. How can this be done with styles or without scripts? here fidl

 div { position: relative; width: 350px; height: 150px; } img { margin-top:-50px; } .rel { position: relative; top: 0; left: 0; display: inline-block; width: 50px; height: 50px; background-color: red; } .abs-1, .abs-2 { display: inline-block; width: 50px; height: 50px; background-color: blue; position: absolute; top: 0; } .abs-1 { right: 0; } .abs-2 { right: 55px; } 
 <div> <span class="rel">rel-1</span> <span class="rel">rel-2</span> <img src="http://placehold.it/350x150"> <span class="abs-1">abs-3</span> <span class="abs-2">abs-4</span> </div>
ps in a real example, there are many such blocks and the picture is dynamically loaded, so it cannot be superimposed on div + its dimensions (height) can change and there are more blocks under it

  • how do you generate <span class="rel">rel-1</span> ? - Grundy
  • @Grundy dynamically pulls out of the database - Vasya
  • How are they generated in html? - Grundy
  • @Grundy <?php $data = get_the_ID(); ?> <span <?php echo "data-id=" . $data; ?> class='quick-view'></span> <?php $data = get_the_ID(); ?> <span <?php echo "data-id=" . $data; ?> class='quick-view'></span> <?php $data = get_the_ID(); ?> <span <?php echo "data-id=" . $data; ?> class='quick-view'></span> - Vasya
  • one
    Then it is easiest to check that there are elements in this array, if there is - leave a margin: -50px; if not - put the class on img - which will be margin: 0; and all no scripts - Grundy

2 answers 2

Option 1. Instead of a negative margin, give the picture absolute positioning on the upper left corner of the parent and z-index. And the blocks - z-index more.

The downside is the text behind the picture. If it is positioned absolutely, the text falls under the picture.

Option 2. Wrap both rel in a div, and absolutely position this div. Put the picture first and its styles will not be needed at all.

 .main { position:relative; width:350px; height:150px; } .box { position:absolute; top:0; left:0; } .rel { display:inline-block; width:50px; height:50px; background-color:red; } .abs-1, .abs-2 { display:inline-block; width:50px; height:50px; background-color:blue; position:absolute; top:0; } .abs-1 { right:0; } .abs-2 { right:55px; } 
 <div class="main"> <img src="http://placehold.it/350x150"> <div class="box"> <span class="rel">rel-1</span> <span class="rel">rel-2</span> </div> <span class="abs-1">abs-3</span> <span class="abs-2">abs-4</span> <p>какой-то текст</p> </div>

  • Thanks, but one more important addition: the size (height) of the picture can vary and there are still blocks located under it jsfiddle.net/nzwhkzsw/2 - my joint that I didn’t specify at once, sorry .. - Vasya
  • @ Vasya Option: wrap the rel in a div, and absolutely position this div. Put the picture first and its styles will not be needed at all. Now I will redo the answer. - Gleb Kemarsky
  • @GlebKemarsky, for the second case, the z-index no longer needs to be exhibited - Grundy
  • @Grundy Yes, thanks. This is from the first version left. Cleaned up. - Gleb Kemarsky

Alternatively, position the picture absolutely, then the margin is not needed, and the presence / absence of blocks will not affect the location of the picture.

 div { position: relative; width: 350px; height: 150px; } img { position: absolute; z-index: -1; left: 0; } .rel { position: relative; top: 0; left: 0; display: inline-block; width: 50px; height: 50px; background-color: red; } .abs-1, .abs-2 { display: inline-block; width: 50px; height: 50px; background-color: blue; position: absolute; top: 0; } .abs-1 { right: 0; } .abs-2 { right: 55px; } 
 <div> <span class="rel">rel-1</span> <span class="rel">rel-2</span> <img src="http://placehold.it/350x150"> <span class="abs-1">abs-3</span> <span class="abs-2">abs-4</span> </div>

  • Thanks, but one more important addition: the size (height) of the picture can vary and there are still blocks located under it jsfiddle.net/nzwhkzsw/2 - my joint that I didn’t immediately indicate, sorry .. - Vasya