I Have Absolute Position Inside Relative Div, When I Zoom In On To The Device Layout Is Overlapping The Parent

I have a div relative position and inside of it an absolute position, but when I zoom in to the device layout, I have the problem that the absolute position overlapping the parent

Solution 1:

You should not center elements ( I think this is what you are trying to do ) with position: absolute; Try with margin: 0 auto;

html,body{background:black;}
#dropzone{
  background:gray;
  position:relative;
  margin:0 auto;
  max-width: 800px;
}

#child{
  width: 300px;
  height: 300px;
  background:green;
  margin: 0 auto;
}

<div id="dropzone">
    <div id="child">
    </div>
</div>

https://jsfiddle.net/tprsLLqy/

If you need different sizes for different device sizes you should use CSS mediaqueries like

@media screen and (max-width: 700px) {
   #child {
      width: 150px;
      height: 150px;
      background-color: orange;
    }
}

See that working example here https://jsfiddle.net/tprsLLqy/1/ and try to resize the area where the result is in. The green box will get smaller and show up in orange.