Bootstrapカレンダーが他のコンポーネントの背後に隠れてしまう(z-indexが効かない)

以下のようなHTMLがあった場合、text1に対してBootstrapのdatetimepickerを適用させるとカレンダーがtext2の背後に隠れてしまいます。inputタグにz-indexを指定しても無視されてしまうようです。
inputタグをdivで囲むのをやめてinputタグにposition: absoluteをつけて試したところ、
「datetimepickerコンポーネントは、非静的に配置されたコンテナ内に配置する必要があります」
といった意味のエラーが出力されてしまいました。

カレンダーをdivのz-indexを無視して前面に表示する方法はないでしょうか？

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5
6<link rel="stylesheet" type="text/css" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
7<link rel="stylesheet" href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/build/css/bootstrap-datetimepicker.css">
8
9<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
10<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
11<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
12<script src="moment-ja.js"></script>
13<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/src/js/bootstrap-datetimepicker.js"></script>
14
15<script type="text/javascript">
16$(function () {
17  $('.date').datetimepicker({
18    locale: 'ja',
19    format : 'YYYY-MM-DD HH:mm:ss'
20  });
21});
22</script>
23</head>
24<body>
25<div class="container">
26
27  <div class="form-group">
28    <div class="input-group" style="position: absolute;z-index: 2;top: 50px; left: 50px;">
29      <input type="text" class="form-control date" />
30    </div>
31    <div class="input-group" style="position: absolute;z-index: 3;top: 80px; left: 50px;">
32      <input type="text" class="form-control date" />
33    </div>                
34  </div>
35
36</div>
37</body>
38</html>

サンプル画像です。

kei344

2017/03/31 10:00

書かれている状況が再現するコード（HTML/CSS/JavaScript）を全て提示されたほうが回答を得やすいと思います。

yuki84web

2017/03/31 11:36

datepickerにz-index付けるのではダメなのでしょうか？

clubman

2017/03/31 11:43

はい、試してみましたがダメでした。

行動規範の内容に同意します

回答1件

ベストアンサー

書かれたコードを試すと、Chromeで
VM236 bootstrap-datetimepicker.js:362 Uncaught Error: datetimepicker component should be placed within a relative positioned container
Firefoxで
Error: datetimepicker component should be placed within a relative positioned container
とエラーが出ます。
そのため、状況を再現できません。

エラー内容から、.input-group には position: relative; を設定する必要が有るのではないでしょうか。

追記：

ローカルにてとりあえず再現できましたが、重ね順の問題なので、position を使わないレイアウトにするほうが手早いとは思います。

【CSS再入門 - z-index再入門 1 | CodeGrid】
https://app.codegrid.net/entry/z-index-1

【要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026】
http://no1026.com/archives/104

【z-indexの使い方〜詳説 | IT工房｜Webデザイン入門】
http://itstudio.co/2014/10/31/3222/

投稿2017/03/31 12:03

編集2017/03/31 12:14

kei344

総合スコア69407