0 
    .games_box
    {
    width:575px;
    margin:8px auto;
    background:#f8f7f7;
    padding:8px;
    border-bottom:#000000 1px dotted;
    }

 <div class="games_box">
<a href='#'>
<img src='$host_name/staff/game-$row[0].gif' width='78' height='75'  alt='games' />
    <div id='staff' style='position:relative; top:-50px;z-index:1; left:29px'>
<img src='images/staff_picks.png' alt='staffpick' width='50' height='51' /></div>
</a>
</div>

スタッフdivを配置します。ゲームボックスdivは大きいです。「clear：both」を使用しますが、使用しません。

1位

ここに画像の説明を入力してください

2位

スタッフピック画像を配置

スタッフピック画像を配置

3位

最後に、z-indexはstaffpick画像を使用し、画像の下のスペースを増やしました

ここに画像の説明を入力してください

4

2 に答える 2

0

こんにちは、このように親の位置を相対的に指定し、子を絶対的な位置に指定できます

CSS

.games_box
    {
    width:575px;
    margin:8px auto;
    background:#f8f7f7;
    padding:8px;
    border-bottom:#000000 1px dotted;
    position:relative;
    }

HTML

<div class="games_box">
<a href='#'>
<img src='$host_name/staff/game-$row[0].gif' width='78' height='75'  alt='games' />
    <div id='staff' style='position:absolute; top:-5px;z-index:1; left:29px'>
<img src='images/staff_picks.png' alt='staffpick' width='50' height='51' /></div>
</a>
</div>

ライブデモhttp://jsfiddle.net/rohitazad/grE5A/

于 2012-04-13T05:32:46.200 に答える
0

「スペースを吸い上げる」には、この例http://jsfiddle.net/grE5A/2/margin-top:-50px;のように使用または使用できます。 position:absolute

<a>#staff を絶対に配置する必要があるのは「親」であるため、タグに相対位置を指定したことに注意してください。

画像の下にスペースがあったのposition:relative; top:-50pxは、スタッフが元の位置に対して相対的に移動するためですが、親は要素が元の位置にあるように動作します。(Z インデックスは、何をしようとしているのかには影響しません。)

于 2012-04-13T07:35:34.680 に答える