溢出：隐藏，我在这里做错了什么

Question

I have explicitly positioned divs, inside a parent div tag. The thing is, when I resize my browser window, i am able to scroll to the specified div position which I don't want to. I tried using overflow and it kinda does nothing other than hiding the div completely. I am clearly missing something here. How do I hide the image when I resize my browser window ? How can I solve this ?

 .Topics__imageContainer { position: absolute; -webkit-transition: opacity .5s,-webkit-transform .5s; transition: opacity .5s,-webkit-transform .5s; transition: transform .5s,opacity .5s; transition: transform .5s,opacity .5s,-webkit-transform .5s; } .Topics__image { border-radius: 50%; border: 3px solid #fff; background-color: #fff; box-sizing: content-box; overflow-x:hidden; display:inline-block; } .icon_wrapper_inner{ overflow-x: hidden; position: relative; } 

 <div class="icon_wrapper_inner"> <div class="Topics__imageContainer" style="opacity: 1; left: 1380px; top:268px;"> <div class="Topics__image Topics__image--far" style="width:50px;height:50px;background:url('http://4hdwallpapers.com/wp-content/uploads/2013/05/Emo-Star-Dekstop-Background-728x546.jpg');background-size:100%"> </div> </div> </div> 

Answer 1

Try reversing the hidden logic in the CSS.

overflow: hidden;
overflow-y: auto;

Answer 2

I fixed it by adding overflow:hidden inside html in bootstrap.css. Now the overflow is hidden as i resize my browser preventing it from scrolling.

 html { font-size: 62.5%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow-x:hidden; }