CSSのポップアップエフェクトhtmlレイアウト

私はクリックでCSS駆動のポップアップをトリガーしています。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レイアウト

答えて

関連する問題