7

HTML にいくつかの div があり、そのうちの 1 つが画像 div を読み込んでいるので、親の div とオーバーラップさせたいと考えています。これが私のコードです：

<div id="something1">
    <div id="something2"></div>
    <div id="parent" style="border: 15px solid #c1c1c1;width:200px; height:250px;">
        <div id="child" style="position: absolute; border: 15px solid #a2f2e2"></div>
    </div>
</div>

異なる位置 (つまり、絶対位置、相対位置など) を使用すると、子 div がその親とオーバーラップできませんでした。ここに私のフィドルリンクがあります: http://jsfiddle.net/yNFxj/4/親 div からは何も見たくありませんが、子 div が親のサイズとして増加し、それが重なっているのを見たいです。

純粋なhtmlとcssだけで、他のページに実装する一般的な方法でどのようにドットを付けることができるかについてのアイデアはありますか?

PS:ボーダー、幅、高さなどは単なる例であり、削除できます。

4

5 に答える 5

18

私が知る限り、Sajjan が最も近いのですが、彼にはいくつかの欠点があります。

  1. Position: absolute親が非静的位置を持つ必要があります (これは多くの場合position: relative、静的と同じように効果的に機能する で行われます)。
  2. 親だけで、子の高さと幅を設定する必要はありません。

これがデモンストレーション用の私のフィドルです。

#parent {
    border: 5px solid gray;
    position: relative;
    height: 100px;
    width: 100px;
    margin-left: 50px;
}

#child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: red;
}

ここでの鍵はposition: relative、親にあります。

しかし、あなたがこれで何を達成しようとしているのか、私は興味があります。どうせなら、もっといい方法がある気がします。

于 2013-01-30T14:36:22.463 に答える
1

最初の問題は、absolute配置された要素が、とは異なる位置を持つ最初の親要素を参照していることstaticです。

これは、親が、、、または位置を持っていない場合fixed、relativeそれabsoluteは体を参照することを意味します。これは、この場合は必要ありません。

次にposition: relative;、親divに配置します。

2番目の問題：絶対位置を使用すると、およびの使用を停止してwidth、、、、およびプロパティの使用をheight開始できます。topleftbottomright

それらすべてを0意味に設定すると、オブジェクトが親の境界まで拡張されます。

しかし、ここではそれらをオーバーラップさせたいので、...単純に、親の境界線のサイズに等しい負の値を使用します：15px;

top:    -15px;
left:   -15px;    
bottom: -15px;    
right:  -15px;

デモ： http： //jsfiddle.net/yNFxj/9/

親の下の境界線が見えるように、破線の境界線を使用しました;）

于 2013-01-30T14:12:48.943 に答える
1

なぜこれがうまくいかないのですか？私があなたを正しく理解していれば、親 DIV を子 DIV でマスクしたいだけですか?

<div id="something1">
  <div id="something2"></div>
  <div id="parent" style="border: 15px solid #c1c1c1;width:200px; height:250px;">
    <div id="child" style="position: absolute; border: 15px solid #a2f2e2;top:0;left:0;width:200px; height:250px;"></div>
  </div>
</div>

クロムでの出力: ここに画像の説明を入力

汎用的にするには、offsetTop/Left/Height/Width メソッドを使用して親の位置/寸法を取得し、これらを使用して子の寸法/位置を設定します。SO にはこれを行う投稿がたくさんあることを確認してください。

于 2013-01-30T13:56:42.997 に答える
0

これを試して：

<div id="something1">
<div id="something2"></div>
<div id="parent" style="border: 15px solid #c1c1c1;position:relative; width:200px; height:250px;">
    <div id="child" style="position: absolute; border: 15px solid #a2f2e2; width:200px; height:250px; left:-15px; top:-15px"></div>
</div>
</div>

あなたのためにフィドルを更新してくださいhttp://jsfiddle.net/yNFxj/16/

于 2013-01-31T05:14:16.180 に答える
0

HTML

<div id="something1">
<div id="something2"></div>
<div id="parent">
    <div id="child"></div>
</div>
</div>

CSS

#parent { 
  width: 100px;
  height: 300px;
  background-color: #a0a0a0;
  width:200px;
  height:250px;
  position: relative;
}

#child {
  width: inherit;
  height: inherit;
  position: absolute;
  background-color: #a2f2e2;
  top: 0px;
  left: 0px;
}

正常に動作します

編集：あなたのために追加され、高さが継承され、適切に配置されました

于 2013-01-30T13:59:16.633 に答える