css彈出影響html佈局

我觸發一個css驅動彈出的點擊，我根本不希望它影響ui。css彈出影響html佈局

在下面的例子中，我自動出現在佈局上顯示效果。

有人能告訴我如何改變彈出，所以它不影響下面的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>

來源

2016-10-25 user2557504

代替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添加到要設置爲彈出窗口的包含塊的元素。否則，默認情況下，abspos元素將相對於視口進行定位。

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

來源

2016-10-25 23:25:30

css彈出影響html佈局

回答

相關問題