0

私は3つの部門を持っています。もう一方の内側。最初の div (黄色の背景) には絶対的な幅と高さがあります。2 番目の div (緑の背景) は最初の div の内側にあり、幅と高さは 100% です。2番目のものにある最後のもの（赤い背景）には、水平方向と垂直方向の中央に配置するパラメータがあります。問題は、2 番目の div に境界線がある場合にのみすべてがうまく機能することです。

ここにコードがあります

<div  id="div1" style="width: 100; height: 70px; position: absolute;background-color:yellow;left: 10px; top: 20px; z-index: 2">
<div  id="div2" style='width:100%;height:100%;background-color:green;border: 3px solid black'>
<div id="div3" class="div_hover" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);background-color: red;">div with border
</div>
</div>
</div>

2 番目の div の境界線は次のとおりです。

border: 3px solid black

この境界線は必要ありません。削除すると、div の場所が劇的に変わります。

スクリーンショットを見るか、 jsfiddleを試すことができます

ボーダーを非表示にしたり、透明にしたり、そのようなものにするようにアドバイスしないでください。

境界線を使用せずに div の位置を維持するために、私を助けてください。PS ユーザー jvilhena は、2 番目の div に position:absolute を使用するようにアドバイスしてくれました。問題は解決しましたが、自分のコードには使用できません。別の方法でアドバイスしてください。

4

1 に答える 1

0

2 番目の div の背景の位置は、おそらく 3 番目の div の -30px のマージンのために、何らかの形で「移動」しています (並べて配置すると、それがわかります)。position:absolute を 2 番目の div に追加すると、問題が修正されます。

<div  id="div1" style="width: 200px; height: 70px; position: absolute;background-color:yellow;left: 10px; top: 20px; z-index: 2">
<div  id="div2" style='width:100%;height:100%;background-color:green;border: 3px solid black'>
<div id="div3" class="div_hover" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);background-color: red;">div with border
</div>
</div>
</div>

<div id="div1" style="width: 200px; height: 70px; position: absolute;background-color:yellow;left: 250px; top: 20px; z-index: 2">
<div id="div2" style='width:100%;height:100%;background-color:green;position: absolute;'>
<div id="div3" class="div_hover" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);background-color: red;">div without border
</div>
</div>
</div>
于 2013-05-16T14:54:34.250 に答える