位置指定(position)で％を使用することで起きた弊害

以下のようなスライドダウンで開くコンテンツがあるとする

See the Pen pull_down_1 by yoshida (@yoshi090) on CodePen.

「コンテンツを開く」ボタンを押下するとヌルっと動いてしまう！！

この理由は以下である。
・位置指定で「top: -44%;」と％で指定している
・押下したあとのボタンの位置を調整するため、jsで「$(this).css('top','-9%');」とまた％指定している

コンテンツの高さが開く前と開いた後で変わるので、％で指定してしまうとボタンの位置がずれてしまう。

こういう時はpx指定で問題なし

以下はボタンの位置をpx指定にしたもの。

See the Pen pull_down_2 by yoshida (@yoshi090) on CodePen.

ボタンの不自然な動きが解消された。pxにすると、コンテンツの高さに関係なく元のボタンの位置からの距離なので固定される。
％はコンテンツの高さ（または幅）に対する割合なので、動いてしまう。

まとめ

レスポンシブ対応では％指定が便利で何かと多用しがちだが、何も考えずに全部％指定にしているとこういう落とし穴もある。