I have this code: JSFiddle
body { padding: 0; margin: 0; } #fi { background-image: url('http://w3.wallls.com/uploads/high-thumbnail/201604/03/105003.jpg'); width: 100%; height: 42rem; background-size: cover; background-attachment: fixed; overflow: hidden; } #button { padding: 10px; border: 2px solid #ccc; -webkit-border-radius: ; border-radius: 5px; width: 100px; text-align: center; color: silver; margin: 100px auto 0 auto; /* box-shadow: 0px 0px 165px navy; */ } #sec { background-image: url('https://www.planwallpaper.com/static/images/FWG_2560x1440.jpg'); width: 100%; height: 42rem; background-attachment: fixed; background-size: cover; } .divider { width: 100%; height: 6rem; background: #ccc; } <body> <div id="fi"> <div id="button">Get Started</div> </div> <div class="divider"></div> <div id="sec"></div> <div id="third"></div> </body> If the first block is not added with the property overflow: hidden , then the background of this block (parent) in which the button is located is moved away by the margin along with the button itself. In general, remove overflow and see for yourself. So why is this happening? As it is very strange and incomprehensible behaves overflow , although it helped) when I taught css properties, it seemed with examples of overflow it works like something differently, and then I can’t understand how it works, please explain very interesting
