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のエンコードの不一致によって発生する可能性のある問題

推薦する

MySQL Community Server 5.6.39 のインストール方法

この記事では、MySQLのダウンロードとインストールの詳細なチュートリアルを記載しています。具体的な...

React でのポータルとエラー境界処理の実装

目次ポータルエラー境界処理エラー境界を使用しない場合はどうなりますか?注記ポータルスロットとも言えま...

非常に詳細な Vue-Router のステップバイステップのチュートリアル

目次1. ルータビュー2. ルータリンク3. リダイレクト4. ルーティングエイリアス5. ルーティ...

Win10にmysql8.0.15 winx64をインストールしてサーバーに接続する際に問題が発生しました

1. mysql-8.0.15をダウンロード、インストール、設定する1. 公式サイト (https:...

VMware Workstation 14 Pro インストール Ubuntu 16.04 チュートリアル

この記事では、VMware Workstation14 ProにUbuntu 16.04をインストー...

JavaScriptのアロー関数の特徴と通常の関数との違い

目次1. 矢印関数の使用1. 通常関数から矢印関数へ2. 中括弧を省略してリターンする3. 括弧を省...

Docker で MySQL クラスターを構築する方法の例

Docker の基本的な手順:アップデートパッケージ yum -y アップデートDocker仮想マシ...

JavaScript で長い画像のスクロール効果を実装する

この記事では、JavaScriptの長い画像スクロールの具体的なコードを参考までに共有します。具体的...

MySQL 5.7 に組み込まれているストレス テストの mysqlslap コマンドと構文の詳細な説明

序文mysqlslap は、MySQL サーバーへのクライアント負荷をシミュレートし、各ステージの時...

mysql5.7.33 で誤って ibdata ファイルを削除した後にデータを回復する方法

目次1. シナリオの説明: 2. 事例のデモンストレーション: 2.1. MySQLの障害発生前にデ...

Fabric.js は DIY ポストカード機能を実装します

この記事では、DIYポストカード機能を実現するためのfabricjsの具体的なコードを参考までに共有...

VMware仮想マシンにdeepin20をインストールする最も完全で詳細なプロセス

仮想マシンソフトウェア: VMware Workstationイメージ: deepin-deskto...

Reactはルーティングを使用してログインインターフェースにリダイレクトします

前回の記事では、webpack と react 環境を設定した後、ログイン インターフェースとその後...

Angularフレームワークのビュー抽象定義の詳細な説明

序文「大規模なフロントエンド プロジェクト向け」に設計されたフロントエンド フレームワークである A...

Hadoop におけるネームノードとセカンダリネームノードの動作メカニズムの説明

1) プロセス 2) FSImageと編集NodeNode は HDFS の頭脳です。ファイルシステ...