Html/CSS Z：index位置：相対的な質問

私は多くの行を持つテーブルを持っています。Html/CSS Z：index位置：相対的な質問

行にオンホバー効果を持たせたいとします。誰かが行の上を移動すると、その行に関するいくつかの追加情報とともにポップアップdivが表示されます。

私はdivを使ってこれを行い、divを表示/非表示にするホバリングを計画していました。

私の問題は、html/cssです。

どのようにして、ホバーに表示されるdivを持つテーブルを作成しますが、テーブルの外観には影響しません。

私はzインデックスを考えていました。しかし、私はそれを働かせることはできません。

2011-05-12 Mark

divにはposition:abolute; top: 10px; left: 20px; z-index: 1、trには、position: relativeを使用する必要があります。（上と左は唯一の仮定です。あなたの行に相対してdivを配置するためにこれらを使用してください）

行を相対的に配置すると、文脈でそれを保持します。 divの絶対配置は、その親（ここでは行）の位置を絶対にします。行に相対値がない場合、divはbodyの絶対値、またはpositionを設定した親要素の絶対値になります。

出典

2011-05-12 08:22:25 DanielB

ニアリーあります。しかし、私がFirefoxに入れたら、うまくいきません。

\tの アップル \tグリーン \tおいしい \t

the Big Apple Tree

\t \tの ストロベリー \tレッド \tおいしい \t

the Big Strawberry Bush

\t – Mark

は多分あなたは私たちがよく見て持つことができますhttp://jsfiddle.netの例を作ります。 – DanielB

これはやっかいなことでした。しかし、見栄えを良くすることは面倒です。私はちょうど最後にfancyboxを使いました。これは、ホバーの代わりに、ユーザーに2回のクリックを課す。しかし、よく見え、うまくいく。 – Mark

要素のZ-インデックスが同じ場合、ブラウザはhtmlに表示されている順序で要素を表示します。だから、Z-インデックスを設定する必要はありません。このようなことをすることができますDEMO （左上のセルにカーソルを合わせるか、2番目の列の上から3番目に移動します）表示したいdivがハイライトしたいテーブルの下にある限りです。

出典

2011-05-12 08:34:35 anothershrubery

プロジェクトでhtmlとcssのみを使用することは重要ですか？そうでなければ、Javascriptにホバー機能を渡すことができます。

出典

2011-05-12 08:42:22 Krimo

Html/CSS Z：index位置：相対的な質問

答えて

関連する問題