css popup effecting html layout

Я запускаю всплывающее окно css, которое вы нажимаете, и я просто не хочу, чтобы он выполнял ui.css popup effecting html layout

В приведенном ниже примере у меня появляется автоматическое отображение эффекта на макет.

Может ли кто-нибудь сказать мне, как изменить всплывающее окно, чтобы оно не влияло на 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 popup effecting html layout

ответ

Смежные вопросы