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キーワードの実行優先度の説明

以下のように表示されます。表から条件フィールドでグループ化仮想テーブルとフィールドを作成し、フィール...

データベース管理における 19 の MySQL 最適化方法

MySQL データベースを最適化すると、データベースの冗長性を削減できるだけでなく、データベースの実...

Docker で lnmp をデプロイする詳細な手順

目次Centosイメージを取得するCentos ベースの nginx コンテナを生成するCentos...

HTML マーキー文字フラグメントのスクロール

その特性は次のとおりです。方向アクティブな字幕のスクロール方向を設定するコードは次のとおりです。 &...

WeChatミニプログラムの開発をスピードアップするためのヒント

1. app.jsonを使用してページを作成する私たちの通常の開発習慣によれば、新しいページを作成す...

テキストエリアのテキストをHTMLに変換する方法、つまり復帰改行について

説明: テキストエリアの値の改行を新しい行に変更しますコードをコピーコードは次のとおりです。 <...

Apache をインストールした後、サービスを開始できません (サービスを開始するとエラー コード 1 が表示されます)

目次1. エラーメッセージ2. エラーの原因3. 解決策1. エラーメッセージ1. インストール後、...

Vueグローバルカスタム命令の実践 モーダルドラッグ

目次背景実装のアイデア成果を達成する背景最近取り組んでいるプロジェクトは、Vue2 で構築されたプロ...

さまざまなSQL結合を簡単に学ぶ

SQL JOIN 句は、テーブル間の共通フィールドに基づいて 2 つ以上のテーブルの行を結合するため...

jsは、州、市、地区の3レベルのリンクの非選択ドロップダウンボックスバージョンを実現します。

インターネットで3レベルリンクを検索したところ、すべてオプションで書かれていました。突然、別の方法で...

LinuxベースのSelenium環境を構成し、操作を実装する

1. Linux で Selenium を使用する1. Chromeをインストールする次のコマンドを...

Docker クリーニングの一般的な方法と問題点

大規模な開発に Docker を使用する場合でも、クリーンアップ戦略がなければ、ディスクがすぐにいっ...

JavaScript BOM ロケーション オブジェクト + ナビゲーター オブジェクト + 履歴オブジェクト

目次1. 場所オブジェクト1. URL 2. 場所オブジェクトのプロパティ3. ロケーションオブジェ...

Javascript での JSBridge に関する予備的研究

目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...

設計仕様に準拠した設計は良い設計でしょうか?

これまでの数年間、私はいわゆる「設計仕様」についてかなりの数の執筆やコンサルティングを行ってきました...