How to prevent jungled absolute positioning in zooming?
<p>I have read here in stackover flow and elsewhere that if we have a parent div with <code>relative</code> position, the child tags with <code>absolute</code> position will not relocate when zooming. But in my following example, it does not obey this rule.</p>

<blockquote>
  <p>In the main file, I have <code>&lt;img&gt;</code> tags instead of div with ids img1 to
  img3 </p>
</blockquote>

<p>Any advice will be appreciated.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 3px solid green;
}
#img1 {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  left: 25%;
}
#img2 {
  position: absolute;
  width: 20px;
  height: 100px;
  background: blue;
  left: 30%;
}
#img3 {
  position: absolute;
  width: 20px;
  height: 100px;
  background: yellow;
  left: 60%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;div id="img1"&gt;&lt;/div&gt;
  &lt;div id="img2"&gt;&lt;/div&gt;
  &lt;div id="img3"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>