f002のフォームで EasyLightboxを使用する時の注意

Magentoのフォームであるf002にEasyLightboxを入れてみた。
動作はするのだが、画面が少しおかしい。表示される写真の一部がヘッダーの下に隠れてしまうのである。

たぶんz-indexの問題だと思い。custom.cssを調べヘッダーのバックグランドのz-indexの数字を低くした。

.header-container { background: url(../images/top_bg.jpg); position:relative; z-index:100; clear:both;margin:0 auto; width:930px; }

ところが状況は一向に変わらない。

EasyLightboxのcssは、”easylightbox.css” で、

/skin/frontend/default/default/css/

に存在し、これををチェックすると

#lightbox{    position: absolute;    left: 0; width: 100%; z-Index: 999; text-align: center; line-height: 0;}

となっており、z-indexは 999 になっているから当然、写真の方が上に来るのに ??????

あれこれやっても状況は変わらない。

で、試しに style.css の方を調べたら、な、なんと・・ 484行目あたりに、

.header {margin:0 auto; padding:0px; text-align:left; position:relative; z-index:1000; }

と、z-index を 1000 に指定してあった。

ついつい先入観で999が一番上限の数だと思い込んでいた私がバカだった。
“easylightbox.css”のz-indexの値を 1200にしてみた。

すると漸くライトボックスの写真が最全面に表示される様になったのである。

About


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です