Hello to all. There was a problem with the implementation of the effect during page layout. The effect is that there is a line on the top of the screen indented, positioned fixed (fixed), which, in fact, is such an "eraser". I mean, the site has blocks in which there is content. Going down the site, there should be an effect of erasing this line of content. For example, there is a yellow block, in which a green block with text. When scrolling down, the yellow block, in fact, rises up, despite the line, and the green "falls down" of this fixed div (above the line). An example is attached. There is also a similar effect with a picture. But I can’t figure out how to do this when conditional layering is present. That is, I can specify the same for the .container block, but then .block is not erased, since it is an internal block. The picture is one, it just rises due to the z-index, but I cannot wipe the content block, leaving the outer yellow block.
Thank you in advance.
body { margin: 0px; padding: 0px; } .main { background-color: #FF6600; padding: 200px 0px 0px; } .fix { position: fixed; background-color: #FF6600; border-bottom: 2px solid black; height: 200px; width: 100%; top: 0px; left: 0px; z-index: 2; } .container { padding: 50px; background-color: yellow; } .block { background-color: green; } .big_pic { z-index: 2; position: relative } .absolute { position: absolute; top: 70%; z-index: 1; } <div class="main"> <div class="fix"> </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie.</p> <div class="container"> <div class="block"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie.</p> </div> </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie. Nam facilisis elit eu neque sodales fringilla. Morbi laoreet, ex sit amet sagittis congue, risus lorem tempor eros, pulvinar semper sem nunc non erat. Phasellus posuere metus lacus, sit am et sollicitudin purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl.et sollicitudin purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl. <img class="big_pic" src="http://katyaburg.ru/sites/default/files/pictures/krasota_prirody/krasivye_cvety_rozy_kartinki_foto_05.jpg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie. Nam facilisis elit eu neque sodales fringilla. Morbi laoreet, ex sit amet sagittis congue, risus lorem tempor eros, pulvinar semper sem nunc non erat. Phasellus posuere metus lacus, sit am et sollicitudin purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl. et sollicitudin purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl. Nullam dui libero, gravida id dui ac, pellentesque gravida justo. Quisque id dolor non nunc scelerisque varius a malesuada felis. Duis aliquam malesuada tortor, quis laoreet lacus vestibulum ut. Sed a vestibulum nunc, in maximus magna. Donec vel ante in nisi volutpat venenatis quis sit amet purus. Nunc eget posuere tortor. Donec in mi lectus. Mauris iaculis aliquet orci, at condimentum ligula bibendum et. Cras egestas metus a pellentesque malesuada. Etiam et imperdiet arcu, nec gravida massa. Sed maximus, lorem a dignissim faucibus, lorem neque laoreet elit, ut scelerisque augue ex et odio. Suspendisse ut pretium magna, sed elementum neque. Donec efficitur lectus vitae erat gravida fringilla et vel ante. Sed consectetur, odio vel venenatis mattis, nisl felis dapibus quam, eget ultrices augue nisi quis sapien. </div> 