
Javaを使用せずにHTMLページ上に埋め込んだiframeを最前面に出す方法はないでしょうか?
ヤフーショップページの左側にあるサイドナビ内のフリースペース枠にiframeでカテゴリーを埋め込んでいます。
その際にiframe枠内ではアコーディオン系のマウスオーバーにてサブメニューが右側に表示されるような感じの事を行っていますが、トリプルサービスでのトップページでは表示になんら問題はないものの、ヤフーショッピングサイトではHTMLタグの制限で外部CSS及びJavaが使用できず何とかならないものかと色々試行錯誤するものの解決の糸口が見当たりません(汗
z-indexをiframeタグに加えてみたもの効かず、overflow:visible;でも効かず、ダメもとでsrc=""のファイル名直後に?wmode=transparentを書き加えてももちろんダメでした(汗
Youtubeの時に?wmode=transparentが有効だったのでもしかして!?と思ったのですが。。。
ヤフーショッピングにてサイドナビ内に設置したいカテゴリが商品量に相応し縦長になり、更にはサイドカテゴリ部より直接商品ページへ飛ばしたいと考えており益々長くなってしまいバランスが悪いのでアコーディオン形のものが埋められればと試行錯誤しております。
他に表示的なアドバイスを含め、何か策があればご教授をお願いします m( . . )m
No.1ベストアンサー
- 回答日時:
要素のスタイルに z-index だけでなく、position: relative も加えてください。
要素に z-index を適用する場合、その要素の position が static 以外の値でないといけません:
つまり relative, absolute, fixed のどれかです。
position: relative を指定し top, right, bottom, left の値を指定しなければ(デフォルト値の auto にしておけば)、要素の位置はそのままに z-index で重なり順を制御できるはずです。
この手法で表示崩れを生じる場合は他のスタイルとの干渉が考えられます。
表示に関するアドバイス、余計なお世話かもしれませんが加えます。
『縦長になってバランスが悪いので』といった理由で JavaScript を用いたアコーディオン型メニューを加えているなら、それはきっとやめたほうがよいでしょう。
JavaScript がオフの環境は考慮されているかという問題以前に、バランスの悪くなるほど縦長のメニューは折り畳んだところで使い勝手は悪いままの場合がほとんどです。
なぜ縦長のメニューになるのでしょう。
カテゴリを細かく分類しすぎなのか。
それとも最下層のカテゴリまで一度に表示しようとしているのですか。
考慮の浅い分類は、表示の工夫以前にそもそも使いづらい運命です。
ぱっと見で収まるくらいの分類数に収めるよう考え直してみてはどうでしょう。
分類しづらい、あまりにかけ離れた商品種を扱っているなら、それは別のショップとしてサイトを作るべきです。
細かな分類は、大きな分類を選んだあとに表示するべきです。
数十の分類から一つを探し出すより、数個の分類を複数回渡り歩くほうがユーザーにストレスはかからないそうです(一回のクリックまでが短ければ、複数回クリックは苦にならない)。
細かな分類まで最初に見せたい理由が、その中に人気の商品があるなどであるなら、それは別枠の分類『人気の商品』『新商品』などとしてリンクを設けるべきで、わらの中から針を探すという苦行をユーザーにさせるべきではありません。
あとただの偏見ですが、マウスオーバーで出てくるサブメニューは使い勝手の悪い印象があるので、よほど洗練された使い方でない限りそれがあるだけでサイトの評価減です。
提供側の『このように見せたい』ではなく、利用側の『このように見たい』が優先される世界を願って。
(Amazon などは『このように見たい』の中にさりげなく彼らの売りたいものを混ぜてくるので、さすがだと思っています)
参考URL:http://webdesignrecipes.com/css-visual-formating …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- CGI (フリーの)ツリー掲示版CGI、昔は多用させてもらいましたが・・今セキュリティ上どうでしょう? 2 2023/06/25 07:18
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- Google Drive Google form を利用して 問い合わせフォームを作りたい 1 2022/04/25 14:15
- SEO WP内の検索で403エラーが出される問題について 1 2022/11/26 08:46
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSで画像の下のスペースをなく...
-
HTML CSS に詳しい方教えてくだ...
-
DOCTYPE宣言、XML宣言について
-
高2の数学です。わかるとこだけ...
-
DIVを選択すると一部のDIVを僅...
-
smallにtext-allignが効かない
-
僻む人
-
1から100までの自然数のうち、2...
-
改行ほどは行かないけど、若干...
-
含む含まないという概念自体の...
-
オシャレ要素が、あまりないか...
-
シュタイナー学校・宗教との関連性
-
DTDや文字コードの解釈が間違っ...
-
overflow: hidden;
-
floatを指定したdiv内のimg要素...
-
htmlの構造について
-
ホームページ作成ソフトKompoZe...
-
HTML5に移行を見据えた上で
-
2行にしたい要素、改行か分割...
-
webサービスでレスポンシブ対応...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
既婚男女の方、結婚前と結婚後...
-
含む含まないという概念自体の...
-
テキストボックスの中にリンク...
-
質問1.
-
改行ほどは行かないけど、若干...
-
NからZへの全単射を具体的に構...
-
input type="hidden"で取得した...
-
smallにtext-allignが効かない
-
aの中にspan
-
HTML の繰返し法???
-
下線と文字の間を調整するには...
-
角丸画像の背景色を透明にした...
-
html タグの閉じスラッシュ前の...
-
CSS:overflow要素の印刷について
-
HTMLページ上でiframeを最前面...
-
CSSで改行後の行間調整
-
tdに対してmin-heightの定義、...
-
H1タグを画像にしたい
-
スタイルシートで文字色を指定...
-
textareaの幅を画面と合わせたい
おすすめ情報