css popup effecting html layout
<p>I am triggering a css driven popup on click, and I simply do not want it to effect the ui.</p>

<p>In the example below, I have it auto appearing to show the effect on the layout.</p>

<p>Can someone tell me how to alter the popup so it does not effect the html underneath? Thanks.</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>div.callout {
  background-color: #FFF;
  background-image: -moz-linear-gradient(top, #444, #444);
  position: relative;
  color: #ccc;
  padding: 10px;
  border-radius: 3px;
  box-shadow: 0px 0px 20px #999;
  margin: 25px;
  min-height: 30px;
  border: 1px solid #0079C2;
  text-shadow: 0 0 1px #000;
  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.8em solid transparent;
  position: absolute;
}
.callout.right::before {
  left: -20px;
  top: 40%;
  border-right: 10px solid #0079C2;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;body&gt;
  &lt;table class="table" style="margin:0 auto; width:100%; align:center;"&gt;
    &lt;col width="25%"&gt;
      &lt;col width="25%"&gt;
        &lt;col width="25%"&gt;
          &lt;col width="25%"&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;th&gt;group A&lt;/th&gt;
                &lt;th&gt;group B&lt;/th&gt;
                &lt;th&gt;group C&lt;/th&gt;
                &lt;th&gt;group D&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;p&gt;&lt;a href="" onclick=""&gt;click for more info&lt;/a&gt;
                    &lt;br&gt;
                    &lt;a href="" id="rate"&gt;++display popup++&lt;/a&gt;
                  &lt;/p&gt;

                  &lt;div id="flag" class="callout right" style=""&gt;


                    &lt;iframe id="frame" src="https://yahoo.com" scrolling="no" width="200px" height="250px" frameborder="0"&gt;

                    &lt;/iframe&gt;

                  &lt;/div&gt;

                  &lt;p style="text-align: left;"&gt;
                    &lt;img src="images/1.png" alt="1.png" style="margin: 0px;" /&gt;​
                    &lt;br/&gt;
                  &lt;/p&gt;

                &lt;/td&gt;
                &lt;td&gt;
                  &lt;p&gt;&lt;a href="" onclick="openFit()"&gt;click to learn&lt;/a&gt;
                    &lt;br&gt;click to learn&lt;/p&gt;
                  &lt;p style="text-align: left;"&gt;
                    &lt;img src="images/2.png" alt="2.png" style="margin: 0px; " /&gt;​
                    &lt;br/&gt;
                  &lt;/p&gt;

                &lt;/td&gt;
                &lt;td&gt;
                  &lt;p&gt;click to learn&lt;/br&gt;
                    Earn your pOints​​​​​​​&lt;/p&gt;
                  &lt;p style="text-align: left;"&gt;
                    &lt;img src="images/3.png" alt="3.png" style="margin: 0px; " /&gt;​
                    &lt;br/&gt;
                  &lt;/p&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;p&gt;click to learn
                    &lt;br&gt;Earn your Points​​​​​​​&lt;/p&gt;
                  &lt;p style="text-align: left;"&gt;
                    &lt;img src="4.png" alt="ace_4.png" style="margin: 0px; " /&gt;​
                    &lt;br/&gt;
                  &lt;/p&gt;
                &lt;/td&gt;

              &lt;/tr&gt;
            &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
</div>
</div>
</p>