ロールオーバーの上にz-index

締切済

質問者：wknuuy
質問日時：2012/09/21 19:47
回答数：3件

html4です。クラスboatの画像を最前面にもってきたいのですが、この３つのクラスのナビの上に重ねるとロールオーバーが反応しなくなりました。boatのz-indexを３から１にするとロールオーバーは反応するのですが、ナビよりも後面にきてしまうためできません。どのようにすればよいでしょうか？

.navi {
position:absolute;
top:704px;
left:238px;
z-index: 1;
}

.navil {
position:absolute;
top:702px;
left:353px;
z-index: 1;
}

.navilast {
position:absolute;
top:708px;
left:474px;
z-index: 1;
}

.boat {
position:absolute;
top:-229px;
left:-430px;
z-index: 2;

}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2012/09/22 15:54

セレクタの書き方が間違っています。

※W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
はすでに回答してあります。
　HTMLとCSSの文法チェックをまずしてそれを直してください。

　セレクタの書き方もサンプルでよく理解してください。
・基点セレクタと、それに繫がるセレクタの書き方
・詳細度の計算と、カスケーディング

　それらを理解しておかないと、先にはまったく進めませんし、そもそも極めて非効率です。
※4. CSS2の構文と基本データ型 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
※5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
※6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

　まずサンプルの一つ一つの書き方を理解できるようになってください。
div.footer div.nav{}
の意味
div.footer div.nav ol li + li{}
の意味
div.footer div.nav ol li:hover ol{}
の意味

　z-indexなどプロパティは、そのあとです。

この回答への補足

div.に続いてですよね？それならもうやってしまっていて。サンプルよりタグ書いてもらうほうがわかりやすいしそれで今のがうまくいけばなるほどというかんじで私は勉強にもなるんですが・・・・。

補足日時：2012/09/22 21:25

通報する

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2012/09/22 14:09

動的な擬似クラスは、他のクラスセレクタと同様、詳細度はb=1ですから上書きされます。

簡単なサンプル・・
　わざとdiv.header中のpはz-index:2にしてあります。:hover擬似クラスで-1=1になります。
　一方プルダウンメニューはz-index:1ですが、これにhoverすると2になります。
★Another HTML-lint 5 ( http://www.htmllint.net/ )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
※タブは＿に置換してあります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>・・・</p>
＿</div>
＿<div class="footer">
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="/">TOP</a></li>
＿＿＿＿<li><a href="/product">製品</a>
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li><a href="/product/tool">作業工具</a></li>
＿＿＿＿＿＿<li><a href="/product/tool2">先端工具</a></li>
＿＿＿＿＿＿<li><a href="/product/tool3">荷役用品</a></li>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿＿<li><a href="/profile">Profile</a></li>
＿＿＿＿<li><a href="/contact">Contact</a></li>
＿＿＿</ol>
＿＿</div>
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

この回答への補足

回答ありがとうございます。やってみましたが、なおりませんでした・・・。画像が４枚もあって、boatの次にナビがあって、そのあとに２枚画像があり、z-indexは１にしています。今の状態だと順番がめちゃくちゃになってしまいます・・・。ロールオーバーが反応すればいいのですが・・。これに付加して書いてほしいです。または他の方法でなにか方法はないのでしょうか。下は変えてみましたがだめだったタグです。

.navi {
position:absolute;
top:704px;
left:238px;
hover{z-index:2;}
}

.navil {
position:absolute;
top:702px;
left:353px;
hover{z-index:2;}
}

.navilast {
position:absolute;
top:708px;
left:474px;
hover{z-index:2;}
}

.boat {
position:absolute;
top:-229px;
left:-430px;
hover{z-index:-1;}

}