title: My images disappear when using position relative and absolute
body: <p>I have this code used for multiple articles and its working fine i think, except when i try to add one special styles for one of the images inside the article by adding style <code>position: relative</code> and <code>id="target"</code> but then the image widths shrink to 0 or they disappear, I can't tell what kind of mistake i made here. please advise.</p>
  
  <p>try to remove <code>position: relative</code> and <code>id="target"</code> and see how the code works.</p>
  
  <p>even is there's a better approach to achieve that concept using jQuery or JS please share it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.article {
    border: 1px solid red;
    padding: 0;
    display: flex;
  }
   
  .article-content {
    border: 1px solid black;
    width: 46.66%;
    text-align: left;
    align-self: center;
    margin-left: auto;
  }
  
  .img-control {
    border:1px solid black;
    max-width: 53.66%;
    margin-right: auto;
    margin-left: 1rem;
    overflow: hidden;
  }
  
  .image {
    width: auto;
    width:100%;
  }
  
  .img-control img {
    display: block;
    max-width: 100%;
    width: auto;
  }
  
  img #target {
    transform: scale(2.2) translate(-35%, 29%) rotate(-25deg);
    width: 670px;
    display: block;
    position: absolute;
  }
  
  @media only screen and (max-width:480px) {
    .article {
      flex-flow: wrap column;
    }
    .article-content, .img-control {
      margin: 0 auto;
    }
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="article"&gt;
    &lt;div class="article-content"&gt;
      &lt;h3 class="mainTitle"&gt;What is Lorem Ipsum?&lt;/h3&gt;
      &lt;h5 class="subTitle"&gt;Lorem Ipsum&lt;/h5&gt;
      &lt;p&gt; is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="img-control" style="position: relative;"&gt;
      &lt;div class="image"&gt;
        &lt;img src="http://via.placeholder.com/466x585" width="100%" alt="" style="width: 670px;right: -48px;top: -18px; display: block;position: absolute;" id="target" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>