html - XHTMLStrictで深度を実装する

Question

<div>の下に実装したいと思い<table>ます。つまり、テーブルには透明なpngが含まれているため、divが表示されますが、の後ろに表示され<table>ます。

誰かがこれを行う方法を知っていますか？

私は試したがfloat:left、z-index役に立たなかった。

Answer 1

あなたは正しい軌道に乗っています。ただし、Z インデックスを使用する場合は、要素も絶対配置する必要があります。

これはdivを使用した例ですが、テーブルでもかまいません...

CSS:

div.top {
   width: 300px;
   height: 200px;
   position: absolute;
   left: 500px;
   top: 50px;
   z-index: 2
}

div.bottom {
   width: 300px;
   height: 200px;
   position: absolute;
   left: 600px;
   top: 100px;
   z-index: 1
}

HTML:

<div class="top">I'm on top</div>
<div class="bottom">I'm below</div>

Answer 2

z-index は、絶対配置された要素でのみ機能します。スタイルを設定position: absoluteしてから使用してtop, right, bottom, left、要素を互いの上に配置することができます。

<div> をマークアップのテーブルの前に配置しfloat: leftて、div に設定し、テーブルを左に移動して、負の値を使用して div の上に配置することもできmargin-leftます。

例えば：

<div id="d1"></div>
<div id="d2"></div>

次の CSS を使用すると、2 番目の div は最初の div の 50px になります。

div {
    width: 100px;
    height: 100px;
    border: solid 1px rgb(0, 0, 0);
}
#d1 {
    float: left;
    background-color: rgb(255, 0, 0);
}
#d2 {
    float: left;
    margin-left: -50px;
    background-color: rgb(0, 255, 0);
    opacity: 0.5;
}

2 番目の div はテーブルになります。div を使用すると簡単にデモンストレーションできます :)

Answer 3

前の2つの回答に追加するだけです。Z-index は、絶対配置された要素だけに限定されません。Z-index は、相対位置を持つ要素にも機能します。