ポップアップの表示・非表示の際に、テーブルの影響を受けないようにしたい

Question

以下のURLを参考にして、自作のポップアップを作成しています。
https://codepen.io/anon/pen/jjKezb

このページにコードを追加して、テーブル内のボタンをクリックするとポップアップが表示させるようにします。
HTML

<table>
  <tr>
    <td>あいうえお</td>
  </tr>
  <tr>
    <td>
      <div class="btn">
        <div class="btn-back">
          <p>Are you sure you want to do that?</p>
          <button class="yes">Yes</button>
          <button class="no">No</button>
        </div>
        <div class="btn-front">Delete</div>
      </div>

      <p class="description">Try clicking different sides of the button – <a href="http://lab.hakim.se/" target="_blank">lab.hakim.se</a></p>
    </td>
  </tr>
  <tr>
    <td>あいうえお</td>
  </tr>
</table>

CSS

// 以下を追加
table {
  width: 400px;
}
tr {
  border: solid 1px #ccc;
}
td {
  border: solid 1px #ccc;
}
.is-open { position: fixed; }

完成したものがこちらです。

ポップアップを表示させる際、テーブルの形状を変化させないようにするために、.is-openクラスにposition: fixedを追加しました。
それでもポップアップを表示したり非表示にする際に、テーブルの形状が変わってしまうのですが、これを固定したままにする方法はあるでしょうか？

ご教示いただけることがあれば何卒よろしくお願いいたします。

Answer 1

大きさ等がボタンを押す前後で変わっていることが問題なので押す前の状態から変更しなければいけません。

.btn {
  position: absolute;
  z-index: 1;
}

.btn + * {
  margin-top: 80px;
}

Comments

[s_diff]

ありがとうございます！