我在点击时触发了 css 驱动的弹出窗口，我只是不希望它影响用户界面。
在下面的示例中，我让它自动出现以显示布局上的效果。
有人可以告诉我如何更改弹出窗口，使其不影响下面的 html 吗？谢谢。
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>最佳答案
在弹出窗口中不要使用 position:relative，而是使用 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;*/
}
使用position:relative，元素保留在文档的正常流程中。换句话说，它继续占用空间并影响布局。
使用 position:absolute 元素将从正常流中删除，周围的元素就像不存在一样。
一旦元素绝对定位，您就可以使用 CSS 偏移属性(top、bottom、left、right) 来移动它。
请记住，绝对定位的元素是相对于其 nearest positioned ancestor 定位的。 。因此，请确保将 position:relative 添加到要设置为弹出窗口的包含 block 的元素。否则，默认情况下，abspos 元素将相对于视口(viewport)定位。
关于html - css 弹出窗口影响 html 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40251273/