画面の大きさでスライドの出現方向を変えたい

Question

画面の大きさで、スライドの出てくる方向を変えたいのですが上手くいきません。
jQueryのslideDownを使いました。cssでtop:0だと上から、bottom:0であれば下から出ることはそれぞれ確認しました。それで、画面の大きさをwidthメソッドで取得して、条件を満たせばcssを書き換えることで良いかと思ったのですが動作しません。cssの方でもメディアクエリで変更を加えたのですが、これもダメでした。原因と改善方法を教えてください。

  <button>開閉</button>
  <div id="box">
    <p>表示</p>
  </div>

`#box {
  display:none;
  width:400px;
  height: 400px;
  top: 0;
  position: absolute;
  background-color:blue;
}
@media (max-width:700px){
  #box {
    bottom:0;
}
}

 $('button').click(function() {
        var width =$(window).width();
       if(width<=700){
         $('#box').css('bottom','0');
       }
        
        $('#box').slideDown();
          
        });

Answer 1

top: 0が生きているからですね。

top と bottom の両方が指定されており、 ... height が何らかの形で制約されていた場合、または position が relative に設定されていた場合は、 top プロパティが優先されて bottom プロパティは無視されます。

bottom - CSS: カスケーディングスタイルシート | MDN

---

解決方法は、top: autoです。

@media (max-width:700px){
  #box {
    top: auto;
    bottom:0;
  }
}

Comments

[pokenasu11]

ありがとうございました。
無事に動きました！