ドロップダウンリストが背面に隠れてしまう。（スマホ）

セレクトボックスのドロップダウンリストが画像の背面に隠れてしまいます。
PCなら問題ないのですがスマホだと画像の背面に隠れてしまします。

スタイルシートでz-indexを設定しても変わらずでした。

どなたか詳しい方、
いらっしゃいましたらご教示して頂きますと幸いです。

ソースは以下になります。

jsp側

<html:select styleClass="select-box" property="selectedId" styleId="selecteddId">
<html:options collection="valueList" property="value" labelProperty="label" />
</html:select>

css側

.select-box {
background: #fff;
border: 1px solid #1e1e1e;
color: #1e1e1e;
font-size: 12px;
height: 40px !important;
line-height: 40px;
text-align: left;
text-indent: 5px;
vertical-align: middle;
width: 100%;
margin-left:4.5%;
z-index:100;
}

何卒宜しくお願い致します。

rossi46hiro

2016/02/04 10:13

せめて該当箇所のHTMLとCSSがないとなんとも言えないんじゃないでしょうか？

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

回答1件

画像の重なりが上になっているのが問題だと思いますが、
ドロップダウンリストにposition: relativeやposition: absoluteを設定した上で、z-indexの設定をしているでしょうか？

position関係の設定ですが、同一階層にある要素にそれぞれ設定してみてください。
下記のサンプルだと「list」と「contents」が同一階層です。

HTML
1<div class="list"> ← ここにz-indexの設定をする
2 <select> ← ここにz-indexの設定の設定をしている
3   <option></option> 
4 </select>
5</div>
6
7<div class="contents"> ← ここのz-indexの設定を確認する
8 <img>
9</div>