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 ?

```css
.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;
}
```

```html
<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>

```