0

私はhtmlウェブサイトを開発しています。これが私のコードです：

<html>
    <body>
        <div style="width:100%;height:50px;z-index:1;"></div> 
        <div style="width:100px;height:50px;z-index:2;position:relative;top:-50px;"></div>
        <div style="width:10px;height:50px;z-index:3;position:relative;top:-100px;"></div>
     </body>
</html>

ここのコードは非常に単純です。3 つの要素を 1 行にまとめるつもりです。ただし、元の位置にある要素の下のスペースは予約されています。下の空白を削除するにはどうすればよいですか?

4

2 に答える 2

1

relative配置は、要素が最初に配置された場所のスペースを確保します。position:absolute代わりに使用してください。ただし、絶対配置の動作は異なります。relative は要素の元の位置に対して「相対的な」座標をとりますが、absolute は親*要素の位置に対して相対的な座標を取ります。

* : static 以外の位置を持つ最も近い祖先、または存在しない場合は本体。あなたの場合、それは体になります。

例：

<html>
    <body>
      <div style="position:relative">
        <div style="width:100%;height:50px;z-index:1;"></div> 
        <div style="width:100px;height:50px;z-index:2;position:absolute;top:0;"></div>
        <div style="width:10px;height:50px;z-index:3;position:absolute;top:0;"></div>
      </div>
     </body>
</html>

補足: インライン スタイルを避けると、マークアップが壊れます<。.

デモを見る

于 2013-07-23T11:17:08.733 に答える
1

これは、相対位置を使用しているためです。相対的な配置を機能させるには、ブラウザは最初に DOM をロードして、要素の元の場所を認識し、位置の値を適用して移動できるようにする必要があります。これは、ドキュメントが配置された要素の周りをリフローしないことを意味します。したがって、あなたの空白。最も簡単な修正は、div スタックを相対位置でラップしてから、div絶対位置を適用することです

<div style="position:relative">
        <div style="width:100%;height:50px;z-index:1;"></div> 
        <div style="width:100px;height:50px;z-index:2;position:absolute;top:-50px;"></div>
        <div style="width:100px;height:50px;z-index:2;position:absolute;top:-100px;">/div>
</div>

内側の div 位置値をいじる必要がありますが、それでうまくいくはずです。相対位置が設定された div をラップすると、body 要素ではなくその div を親として使用する絶対配置が作成されるため、この例では必須ではありませんが、実際にはこれを行う必要があります。

ただし、<ul>このシナリオでは要素がより適切かどうかを検討します

于 2013-07-23T11:18:00.047 に答える