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シリーズチュートリアル

目次1. 基本概念と基本コマンド1) 基本的な概念2) 基本コマンド2. SQL文の記述順序と実行順...

Linuxでディスク使用量を確認する方法

1. dfコマンドを使用してディスク全体の使用量を表示します。 df コマンドは、ハードディスクのマ...

nginx のフロントエンドとバックエンドに同じドメイン名を設定する方法

この記事では、主にnginxのフロントエンドとバックエンドに同じドメイン名を設定する方法を紹介し、皆...

MySQL データベースのインポートとエクスポートのデータ エラーの解決例の説明

データのエクスポートエラーを報告する 「secure_file_priv」のような変数を表示します。...

MySQL で珍しい文字を挿入できないときの対処方法 (文字列値が正しくない)

最近、ビジネス側から、一部のユーザー情報の挿入に失敗し、エラー メッセージが「不正な文字列値:&qu...

UA による Web サイトのクロールを防ぐ Nginx のクローラー対策戦略

クローラー対策ポリシー ファイルを追加しました: vim /usr/www/server/nginx...

Linux コマンドラインからファイルを削除する実用的な方法

rm コマンドrm コマンドは、ファイルを削除するときによく使用されるコマンドです。ファイルまたはデ...

MySQL エラー コード 1064 の解決策

SQL ステートメント内の単語が mysql のキーワードと競合する場合は、`` (タブ キーの上)...

js の通常形式の日付と時刻に 0 を自動的に追加する 2 つのソリューション

目次背景解決策1アイデア:コード:解決策2アイデア:要約する参照する背景日付と時間をフォーマットする...

Vue codemirrorはオンラインコードコンパイラの効果を実現します

序文Web 上でオンライン コード コンパイルの効果を実現したい場合は、 CodeMirrorを再度...

ウェブページにプレーヤーを埋め込む埋め込み要素の自動開始が false 無効

最近、仕事でサウンド ファイルを再生するために Web ページにプレーヤーを埋め込む必要に迫られまし...

MySQLシリーズのMariaDBサーバーのインストール

目次チュートリアルシリーズ1. yumパッケージマネージャーを使用してMariaDBサーバーをインス...

Vue を使用して 2 つのデータ セットの違いを比較する視覚化コンポーネントの詳細な説明

目次必要:要点:これまでの要点に従って、コンポーネントのプロパティを確立できます。コンポーネントの基...

mysql5.7でbinlogを使用してデータを復元する方法

ステップ1: MySQLでbinlogが有効になっていることを確認する '%log_bin%...

Dockeにredisをインストールする方法

1. redisイメージを検索する docker 検索 redis 2. Redisイメージをダウン...