Inside the block with the main content you need a fixed button when you click on which a div block will go out and this block should stretch across the entire height of the screen. Outwardly, I implemented it like this

The problem is that now the fixed-block , which is above all, blocks the content and does not allow to interact with it.

Can someone tell me how to avoid this problem and externally leave it all the same?

 body { background-color: #333; } .wrapper { position: relative; max-width: 520px; width: 100%; margin: 0 auto; background-color: #fff; } .fixed-block { position: fixed; top: 0; overflow: hidden; z-index: 999; max-width: 520px; width: 100%; height: 100%; } .hidden-block { display: block; position: absolute; top: 0; right: -200px; width: 200px; height: 100%; padding: 10px; box-sizing: border-box; background-color: #ccc; transition: right .2s; } .hidden-block-ticker { display: none; } .btn { position: absolute; top: 15px; right: 0; width: 50px; hieght: 50px; background-color: #3da7a6; cursor: pointer; transition: right .23s; } .btn span { display: block; width: 40px; height: 40px; margin: 5px; background-color: #001414; } .btn:hover { right: 10px; } .btn:hover + .hidden-block { right: -190px; } .hidden-block-ticker:checked ~ .btn { right: 200px; } .hidden-block-ticker:checked ~ .hidden-block { right: 0; } 
 <div class="wrapper"> <div class="fixed-block"> <input type="checkbox" id="btn" class="hidden-block-ticker"> <label class="btn" for="btn"> <span></span> </label> <div class="hidden-block"> <p>fgfdfdgfdg</p> <p>fgfdfdgfdg</p> <p>fgfdfdgfdg</p> <p>fgfdfdgfdg</p> <p>fgfdfdgfdg</p> </div> </div> <div class="content"> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> </div> </div>

  • The problem is z-index. Put a z-index equal to the z-index of the content and a mustache. - Alexxosipov
  • Transfer the code from the link directly to the question. - 0xdb
  • z-index will not help here, even if putting greater value for div content - Pavel

2 answers 2

At you this block occupies 100% of width, therefore it takes control. You need to set its width fixed.

like this

 .fixed-block { position: fixed; top: 0; overflow: hidden; z-index: 999; max-width: 520px; width: 300px; /* изменил */ height: 100%; right: 0; /* добавил */ }
  • in this case, the button that pulls out the hidden block will stick to the right edge of the browser - Pavel

If it would be useful to someone, I found the solution through pointer-events. Example

 <div class="wrapper"> <div class="fixed-block"> <input type="checkbox" id="btn" class="hidden-block-ticker"> <label class="btn" for="btn"> <span></span> </label> <div class="hidden-block"> <p>fgfdfdgfdg</p> <p>fgfdfdgfdg</p> <p>fgfdfdgfdg</p> <p>fgfdfdgfdg</p> <p>fgfdfdgfdg</p> </div> </div> <div class="content"> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> <p>Sasasas</p> </div> </div> 
 body { background-color: #333; } .wrapper { position: relative; max-width: 520px; width: 100%; margin: 0 auto; background-color: #fff; } .fixed-block { position: fixed; top: 0; overflow: hidden; z-index: 999; max-width: 520px; width: 100%; height: 100%; pointer-events: none; } .hidden-block { display: block; position: absolute; top: 0; right: -200px; width: 200px; height: 100%; padding: 10px; box-sizing: border-box; background-color: #ccc; transition: right .2s; pointer-events: auto; } .hidden-block-ticker { display: none; } .btn { position: absolute; top: 15px; right: 0; width: 50px; hieght: 50px; background-color: #3da7a6; cursor: pointer; transition: right .23s; pointer-events: auto; } .btn span { display: block; width: 40px; height: 40px; margin: 5px; background-color: #001414; } .btn:hover { right: 10px; } .btn:hover + .hidden-block { right: -190px; } .hidden-block-ticker:checked ~ .btn { right: 200px; } .hidden-block-ticker:checked ~ .hidden-block { right: 0; }