1389833674 CSSとJQueryの表示部分で悩んでます。


グローバルナビのプルダウンがJQueryで作成した画像アニメーションの下に潜り込んでしまいます。
CSSのプルダウンの部分に
position: absolute;
z-index: 1;
を加えると解消できるといった表記がありやってみたのですが、確かに画像アニメーションの上に表示されるようになったのですが、画像のようにプルダウンの全ての項目が全て重なってしまいます。
どのようにすれば回避できるでしょうか?

ご教授宜しくお願いします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2014/01/18 16:43:44

ベストアンサー

id:Lhankor_Mhy No.2

回答回数813ベストアンサー獲得回数232

 補足拝読しました。
 入れ子になっているっぽいので周辺のマークアップによってやり方が変わると思いますが、以前の回答のとおりで上手くいきそうな気がします。

#header #global_nav li li > a {
	display: block;
/* ここを削除
	position: absolute;
	z-index: 2;
 */
	padding: .75em 2em;
	text-decoration: none;
	color: #333;
	background-image: url(../images/arrow_02.png);
	background-repeat: no-repeat;
	background-position: 1em center;
...
}
#header #global_nav li ul {
	position: absolute;
	z-index: 2;
}
id:hiroyukkkky

ありがとうございます!!無事最前面に表示されました。本当に助かりました!

2014/01/18 16:43:39

その他の回答1件)

id:Lhankor_Mhy No.1

回答回数813ベストアンサー獲得回数232

 できればコードをご提示いただきたいのです。その方が回答がしやすいです。
 
 とりあえず、ご質問の様子から想像すると、スタイルの付け方が違うのではないでしょうか。
 プルダウンメニューが

<ul>
  <li>会社概要</li>
  <li>企業理念</li>
  ...

 のようにマークアップされているところに

li{
  position: absolute;
  z-index: 1;
}

 とスタイルを書いているのではないでしょうか。
 
 もしそうであるなら、以下のような感じにするとどうなりますか。

ul{
  position: absolute;
  z-index: 1;
}

 
※回答はあくまで想像上のコードです。実際のコードとは異なります。

id:hiroyukkkky

ソースで該当部分と思われる部分を抜粋しました。宜しくお願いします。

2014/01/16 23:38:19
id:hiroyukkkky

該当部分のソースを記述します。

(社名の部分はxxxで伏せております)

■プルダウンの重なっている部分

#header #global_nav li li > a {

display: block;

position: absolute;

z-index: 2;

padding: .75em 2em;

text-decoration: none;

color: #333;

background-image: url(../images/arrow_02.png);

background-repeat: no-repeat;

background-position: 1em center;

■HTML

<ul class="sub-menu">

<li id="menu-item-2297" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2297 menu-item-slug-about"><a href="http://xxx.co.jp/about/">会社概要</a></li>

<li id="menu-item-2294" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2294 menu-item-slug-philosophy"><a href="http://xxx.co.jp/about/philosophy/">企業理念</a></li>

<li id="menu-item-2293" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2293 menu-item-slug-history"><a href="http://xxx.co.jp/about/history/">沿革</a></li>

</ul>

id:Lhankor_Mhy No.2

回答回数813ベストアンサー獲得回数232ここでベストアンサー

 補足拝読しました。
 入れ子になっているっぽいので周辺のマークアップによってやり方が変わると思いますが、以前の回答のとおりで上手くいきそうな気がします。

#header #global_nav li li > a {
	display: block;
/* ここを削除
	position: absolute;
	z-index: 2;
 */
	padding: .75em 2em;
	text-decoration: none;
	color: #333;
	background-image: url(../images/arrow_02.png);
	background-repeat: no-repeat;
	background-position: 1em center;
...
}
#header #global_nav li ul {
	position: absolute;
	z-index: 2;
}
id:hiroyukkkky

ありがとうございます!!無事最前面に表示されました。本当に助かりました!

2014/01/18 16:43:39

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません