cssで親の親要素に位置合わせしたい

Question

###前提・実現したいこと
楽天のサイトのようなポップアップしてもサイドバーを作りたい
https://www.rakuten.co.jp/

こちらのサイトのようにポップアップ位置が上部固定のサイドバーを作りたいのですが、うまくいきません。
親の親要素にあるposition:relativeに合うように位置合わせの方法をご存知でしたら、教えていただけると幸いです。

###発生している問題・エラーメッセージ

写真のように（見にくくてすみません）親要素に引きづられて、ポップアップウィンドウが下がってしまいます。

###該当のソースコード

  <ul class='grand_pararent'>
  --6回ループ
   <li class='l-category'>
     大カテコギー
   </li>
   <ul class='popup'>
      <li class='m-category'
        中カテゴリー
      </li>
      <ul class=>
         <li class='s-category'>
           小カテゴリー
         </li>
      </ul>
   </ul>
   </ul>

###試したこと
.grand_parentにposition:relative、.popupにposition: absoluteを指定して親の親要素の高さポジションを開始位置にしたいのですが、できませんでした。

Comments

[kei344]

状況が再現できるCSSも追記ください。

Answer 1

.grand_parent {
  position: relative
}

.popup {
  position: absolute
  top: 0;
}

でできないでしょうか？

Comments

[alberorana]

ありがとうございます！どんぴしゃでした！

[Ryuto]

よかったです。