On the page there is a block that climbs under the top block.

enter image description here

Those. red fits under black.

How it was done: in the red block position: relative , top: -50px and z-index: -1 . Now it is necessary to place buttons and links on the red block. But since in the red block z-index: -1 , the buttons are not pressed.

PS Red must be a background, not a picture. And the buttons must be located inside this block.

  • Add a code or link to the site, so it will be easier and the correct answer will get faster) - CbIPoK2513

2 answers 2

z-index is not needed here at all - it is superfluous. Just position: relative and top: -50px. And then we assign position: absolute to the red block and position it as it should.

 body { margin: 0; padding: 0; } .black { background-color: black; width: 100%; height: 100px; } .red { position: relative; top:-50px; width: 200px; height: 50px; background-color: red; } .red button { position: absolute; width: 50px; height: 20px; top: 15px; margin-left: 10px; border-radius: 10px; } .red a { position: absolute; top: 15px; left: 85px; text-decoration: none; color: white; } .red a:hover { text-decoration: underline; } 
 <div class="black"></div> <div class="red"> <button>OK</button> <a href="https://www.tut.by/">www.tut.by</a> </div>

  • As I understand it, you are a little different. For better presentation, red is a slider (with buttons, links), and black is a cap that fits a little on the slider - r.mcreal

position: absolute; for the button is not suitable? with it you can set z-index: 100; and it will definitely be above the black block

  • Will not be. z-index doesn't work that way. - Qwertiy ♦