user2557504 user2557504 - 1 month ago 5
HTML Question

css popup effecting html layout

I am triggering a css driven popup on click, and I simply do not want it to effect the ui.

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

Can someone tell me how to alter the popup so it does not effect the html underneath? Thanks.



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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

<div id="flag" class="callout right" style="">


<iframe id="frame" src="https://yahoo.com" scrolling="no" width="200px" height="250px" frameborder="0">

</iframe>

</div>

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

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

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

</tr>
</tbody>
</table>




Answer

Instead of position: relative on the pop-up, use position: absolute.

 div.callout {
    background-color: #FFF;
    background-image: -moz-linear-gradient(top, #444, #444);
    position: absolute; /*ADJUSTED*/
    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;*/
  }

With position: relative an element remains in the normal flow of the document. In other words, it continues to take up space and impacts the layout.

With position: absolute the element is removed from the normal flow and surrounding elements act as though it doesn't exist.

Once the element is absolutely positioned, you can use the CSS offset properties to move it around.

top: ?;
bottom: ?;
right: ?;
left: ?;

Keep in mind, an absolutely positioned element is positioned relative to its nearest positioned ancestor. Therefore, make sure to add position: relative to the element you want to set as the container for the pop-up. Otherwise, the abspos element will by default be positioned relative to the viewport.

https://jsfiddle.net/vdxhnfsp/1/

Comments