日付の入力にjqueryのdatepicker / datetimepickerを使い、本文の入力にWYSIWYGエディタであるelrteを使って開発をしていました。
datepickerの下にelrteを配置したところ、datepickerを最前面に表示したいのにelrteが部分的に優先して表示されてしまう、そんなとき。
そう。問題はz-indexにあります。
datepickerのz-indexは1になっているのに対して、elrteの一部のz-indexが1以上になっているようです。
datepicker z-indexでググるとヒントがいろいろ出てきます。
リーズナブル(簡単)な方法はcssでz-indexを固定してあげることです。
実際やってみるとどうにもうまくいきません。良くある例はこちら。
#ui-datepicker-div { z-index: 1000; }
さらに調べてみると、datepicker / datetimepickerのAPIが変更されたとき(April 17, 2010)に、CSSに値があるにも関わらず動的に設定するようになったようです。
そこでcssでの指定を優先させます。
.ui-datepicker { z-index: 1000 !important; }
1000という数字は勝ちたい相手に合わせて調整します。今回は1000で目的を達成できました。