ノウハウ色々
モジュールいろいろ
リンク集
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー


当サイト構築活用本
  (amazonリンク)

XOOPSコミュニティサイト構築ガイド

Customizing XOOPS

Googleマップ+Ajaxで自分の地図をつくる本

PHPサイバーテロの技法―攻撃と防御の実際

メイン
   《01》XOOPSノウハウなど
     z-indexでのブロックの重ね合わせ

スレッド表示 | 古いものから 前の記事 | 次の記事 | 下へ
話題
z-indexでのブロックの重ね合わせ
投稿者: fanrun7     投稿日時: 2010-1-19

森を走ろう!は、その場その場の場当たりでいじってるもので時々はまります。

今回はまったのはcssでのz-indexを指定してのブロックの重ね合わせです。
IE6,7,8、Firefox、Safari、Chromeで確認しながら手を入れましたが、
以下の2点で随分時間をつかってしまいました。

(1個目)IEとFirefoxは、positionがabsoluteのブロックどうしでないとz-indexが効きませんでした。

(2個目)親ブロックが異なる場合でも、Firefox、Safari、Chromeはz-indexの値で重ね合わせが決まるのに対して、IEは同じ親ブロック内で重ねた日に親ブロック同士w重ね合わせる。

-サンプル--------------------------------------------------------
<html>
<head>
<title>z-indexによる重ね合わせ</title>
</head>
<body>
<div>
<div style="z-index:1;position:absolute;left:0px;top:0px;width:150px;height:150px;background-color:#ff0000;">赤</div>
<div style="z-index:3;position:absolute;left:0px;top:100px;width:150px;height:150px;background-color:#ffff00;">黄</div>
</div>
<div style="position:absolute;left:100px;top:0px">
<div style="z-index:2;position:absolute;left:0px;top:0px;width:150px;height:150px;background-color:#0000ff;">青</div>
<div style="z-index:4;position:absolute;left:0px;top:100px;width:150px;height:150px;background-color:#00ff00;">緑</div>
</div>
</body>
</html>
----------------------------------------------------------------

でIEの場合は、次の表示。
(6kB)

Firefox、Chrome、Safariは次の表示でした。後で試したらOperaもこちらでした。
(7kB)

とりあえずは、入れ子をやめて対応しましたが、面倒ですね。
スレッド表示 | 古いものから 前の記事 | 次の記事 | トップ
Copyright(c) 1996-2010 森を走ろう企画    powered by XOOPS