2

私は2つのdiv（100px x 100px）を積み重ねており、下部のdivの上部に黒い境界線があります。フィドルを参照してください。

<div id="top"></div>
<div id="bottom"></div>​

div { 
  width: 100px; 
  height: 100px; 
}

#top { 
  background: tomato; 
}

#bottom { 
  border-top: 1px solid black; background: gold; 
}

上のdivを使用して、下のdivの境界線を隠したいと思います。（この場合、境界線を削除することはできません）。

通常、これを行うには、両方のdivを設定position: relativeし（ div＃oneがdiv＃twoよりも大きいことを確認します）、次にdiv＃oneに追加します。fiddleを参照してください。cssは次のようになります。z-indexz-indexmargin-bottom: -1px

div { 
  width: 100px; 
  height: 100px; 
  position: relative; 
}

#top { 
  z-index: 9999; 
  margin-bottom: -1px; 
  background: tomato; 
}    

#bottom { 
  z-index: 1; 
  border-top: 1px solid black; 
  background: gold; 
}

しかし、私は以前にいじっていましたが、上部のdivをフロートさせ（負の下部マージンを維持しながら）、下部のdivをクリアすると（垂直に積み重ねられたままになるように）、position: relativeまたはz-を使用する必要がないことに気付きました。上部のdivに負の下部マージンを追加する限り（下部の上部マージンが負であるのではなく）、境界線を非表示にするインデックス-フィドルを参照

div { 
  width: 100px; 
  height: 100px; 
}

#top { 
  float: left; 
  margin-bottom: -1px; 
  background: tomato; 
}    

#bottom { 
  clear: both; 
  border-top: 1px solid black; 
  background: gold; 
}

これは問題なく機能します。作成するコードが少ないので、私はそれを好みます。では、ここで何が起こっているのでしょうか。これは、あるものを他のものの上に重ねる有効なクロスブラウザーの方法ですか、それとも私がいつも行っているように、z-indexを使用している最初の方法に固執するのが最善ですか？

4

1 に答える 1

1

これはクロスブラウザの問題です。私が考える最初の方法に固執する方が良いです。

于 2012-07-30T12:22:44.980 に答える