div が iframe に覆われるいくつかの状況とその解決策

div が iframe に覆われるいくつかの状況とその解決策

類似の構造:

コードをコピー
コードは次のとおりです。

<div></div><ifram src="<a href="http://caibaojian.com"></iframe">http://caibaojian.com"></iframe</a>>

1つ目:透明な背景がブロックされている

div が透明な背景を使用する場合、それが不透明度または RGBA 形式であるかどうかに関係なく、Chrome を除く他のすべてのブラウザでは、div が iframe によって覆われていると表示されます。

解決:

div は不透明な背景または透明な背景画像を使用します。

2番目のタイプ: z-indexはIE8では無効です

IE では、iframe 内でビデオ再生を導入すると、div の z-index が無効になります。つまり、div の z-index が何に設定されていても、iframe によってカバーされてしまいます。ソース

解決:

iframe アドレスにパラメータ wmode=opaque を追加します。アドレスが http://caibaojian.com の場合は、http://caibaojian.com?wmode=opaque に変更します。

他の要素の背後にフラッシュする

ちなみに、Flashにもこのz-indexの無効な問題があることがわかりました。同じことがFlashにも上記のパラメータを追加します


コードをコピー
コードは次のとおりです。

<param name="wmode" value="透明">

または


コードをコピー
コードは次のとおりです。

<EMBED src="<a href="https://cdn.css-tricks.com/FlashAnimation.swf">https://cdn.css-tricks.com/FlashAnimation.swf</a>" type="application/x-shockwave-flash" wMode="Transparent">

付録: iframe のいくつかのパラメータ

国境


コードをコピー
コードは次のとおりです。

<iframe の境界線="3"></iframe>

フレームの周囲の境界線の幅を設定します

フレームボーダー


コードをコピー
コードは次のとおりです。

<iframe フレームボーダー="0"></iframe>

境界線が 3 次元かどうかを設定します (0 = いいえ、1 = はい)

高さ、幅


コードをコピー
コードは次のとおりです。

<iframe 高さ="31" 幅="88"></iframe>

境界線の幅と高さを設定する

スクロール


コードをコピー
コードは次のとおりです。

<iframe スクロール = "いいえ"></iframe>

スクロールバーはありますか(はい、いいえ、自動)

ソース


コードをコピー
コードは次のとおりです。

<iframe src="女の子.gif"></iframe>

iframe によって呼び出されるファイルまたは画像を指定します (html、htm、gif、jpeg、jpg、png、txt、*.*)

まとめ<br />以上がこの記事の全内容です。皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問があれば、メッセージを残してコミュニケーションを取ることができます。

<<:  要素タイムラインの実装

>>:  MySQLのエンコードの不一致によって発生する可能性のある問題

推薦する

JS を使用して Web ページのウォーターフォール レイアウトを実装する方法

目次序文:ウォーターフォールレイアウトとは何ですか?達成方法: 1. 画像を取得する2. 画像の帯域...

Dockerデータストレージの概要

この記事を読む前に、ボリューム、バインドマウント、tmpfs マウントの基本を理解しておいてください...

MySQLはtruncateコマンドを使用してデータベース内のすべてのテーブルを素早くクリアします

1. まずSELECT文を実行して、すべての切り捨て文を生成します。ステートメント形式: selec...

Bootstrap 3.0 学習ノート グリッドシステムの原則

前の 2 つの記事の簡単な紹介を通じて、Bootstrap についての基礎的な理解が得られました。 ...

私のCSSアーキテクチャのコンセプト - それは人によって異なり、ベストなものはなく、適切なものだけがある

はじめに<br />私はフロントエンド分野でかなり長い間働いており、CSS分野でも長い間...

WindowsシステムでMySQLデータベースを完全にアンインストールして、MySQLを再インストールします

1. コントロールパネルで、MySQLのすべてのコンポーネントをアンインストールします。コントロール...

親要素を基準にCSSの位置を絶対的に設定する方法についての簡単な説明

ご存知のとおり、CSS の絶対位置はデフォルトでドキュメントに応じて設定されます。たとえば、posi...

CSS で複数の境界線を実装するためのヒント

1. 複数の国境[1]背景: ボックスシャドウ、アウトライン使用シナリオの多様性を考慮すると、複数の...

MySQL パスワード変更方法の概要

MySQL 5.7 より前のバージョンのパスワードを変更する方法:方法1: SET PASSWORD...

ティックアニメーション効果を作成するための svg+css または js

以前、上司からログイン後にチェックマークを表示できるプログラムを作るように言われたのですが、Baid...

MySQL ジョイントインデックスの使用ルール

結合指数は複合指数とも呼ばれます。複合インデックスの場合: MySQL はインデックス内のフィールド...

Centos7 FFmpeg オーディオ/ビデオ ツールのインストールに関する簡単なドキュメント

ffmpeg は非常に強力なオーディオおよびビデオ処理ツールです。公式 Web サイトは http:...

MySQL で重複時間を削除して時間差を計算する実装

目次必要:ドライブ:アイデア:成し遂げる:個人的には、実際の開発ではストアド プロシージャの使用はお...

Windows 10 に付属する仮想マシンのネットワークを設定するための詳細な手順 (グラフィック チュートリアル)

1. サーバー ホストをクリックし、右側の操作リストで [仮想スイッチ管理] をクリックして、仮想...

子要素の margin-top によって親要素が移動する問題の解決方法

問題の説明今日、ページ スタイルを変更していたときに、子要素にmargin-top設定したのに、子要...