どのようなデフォルトのCSSが、2つの要素を相対的な位置合わせで完全にオーバーラップさせないのですか？

#img1と#canvas1は次のコードで完全に重複していませんか？私はまったく同じ場所にそれらを欲しい。私はキャンバス上でjavascriptアニメーションで画像を重ねています。初期の考えは、パディングまたはマージンのデフォルト設定がどこかで干渉していたことでした。私はすべての要素のためにゼロに設定しようとしました - それは動作しません。私はposition:relativeがその要素の通常の位置を基準にして要素を配置することを理解しています。明らかに行うために、デフォルト設定または明らかに何か...どのようなデフォルトのCSSが、2つの要素を相対的な位置合わせで完全にオーバーラップさせないのですか？

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    .chapter { 
 
     width: 90%; 
 
     margin: 0 auto; 
 
     max-width: 1000px; 
 
     border: 1px solid red; 
 
    } 
 
    
 
    #img1 { 
 
     border: 1px solid green; 
 
     position: relative; 
 
     left: 50px; 
 
     height: 100px; 
 
     width: 100px; 
 
     margin: 0px; 
 
     padding: 0px; 
 
    } 
 
    
 
    #canvas1 { 
 
     border: 1px solid blue; 
 
     position: relative; 
 
     left: -50px; 
 
     height: 100px; 
 
     width: 100px; 
 
     margin: 0px; 
 
     padding: 0px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="template" id="T2"> 
 
    <div class="chapter" id="C2"> 
 
     <h1>Why can't I overlap the below elements?</h1> 
 
     <img src="" id="img1" /> 
 
     <canvas id="canvas1"></canvas> 
 
    </div> 
 
    </div> 
 

 
</html>

出典

2017-09-05 DVCITIS

2つのことを行方不明：

1）ないでくださいHTMLコード内の2つの要素の間に改行またはスペースを残してください（下記参照）

2）キャンバスのleftの設定を-52pxに設定します。イメージの2 x 1pxボーダーを考慮する必要があります。

.chapter { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    max-width: 1000px; 
 
    border: 1px solid red; 
 
} 
 

 
#img1 { 
 
    border: 1px solid green; 
 
    position: relative; 
 
    left: 50px; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#canvas1 { 
 
    border: 1px solid blue; 
 
    position: relative; 
 
    left: -52px; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
}

<div class="template" id="T2"> 
 
    <div class="chapter" id="C2"> 
 
    <h1>Why can't I overlap the below elements?</h1> 
 
    <img src="" id="img1" /><canvas id="canvas1"></canvas> 
 
    </div> 
 
</div>

出典

2017-09-05 19:57:19 Johannes

ああ。私の国境を完全に忘れてしまった。ありがとうございます – DVCITIS

@Johannes私はそれを解決しようとしました。疑いがあります。 'img'タグにも境界があり、' canvas'要素に似ています。なぜキャンバスだけのピクセルを増やすべきですか？ –

@ NarenMurali画像は罫線を含めて52ピクセル幅なので、キャンバスは通常は（左パラメータなしで）左から52ピクセルから開始するので、イメージを正確にカバーするためには左に52ピクセル移動する必要があります。 – Johannes

#img1 { 
border: 1px solid green; 
position: relative; 
left: 56px; 
height: 100px; 
width: 100px; 
margin: 0px; 
padding: 0px; 
}

これは働いていた...

出典

2017-09-05 19:56:24

質問はなぜですか？私は整列するためにピクセルを追加することができますが、なぜ私はそれを行う必要があるか知りたいですか？もちろん、 – DVCITIS

あなたが行っている効果を達成するが、あなたの質問に答えるために、より良い方法は確かにありますが、私は間隔が親要素にデフォルトのフォントサイズによって引き起こされていると信じています。チャプタdivでフォントサイズを0pxに設定すると、要素が重なるようになります。

出典

2017-09-05 20:01:15 rmurph46

発言のカップル： '簡単に' のサイジングのための

使用box-sizing: border-box。 border-boxを使用すると、ボーダーの幅と詰め物が追加された要素の要素から差し引かれます。 width: 100px持つ要素、1pxのborder-widthと10pxのpadding 100が+（2 * 1）+（2 * 10）= box-sizing: border-boxことなく、広い122pxしかし要素もborder-widthとpaddingbox-sizing広い100pxにになるであろうborder-boxに設定されています。要素を重複させようとすると、周囲のコンテナ要素をできるだけ空にすることが最も簡単です。 h1要素を取り出すことで、オーバーラップをより管理しやすくなります。
canvas要素のpositionをabsoluteに変更します。この方法ではもはやそれはDOMではなくなり、配置親の左上のコンテナに配置されます（あなたの例ではdiv.chapterは私の答えはdiv.containerです）。これは要素の並びを整えようとするときにも役立ちます。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    position: relative; 
 
} 
 

 
.chapter { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    max-width: 1000px; 
 
    border: 1px solid red; 
 
} 
 

 
#img1 { 
 
    border: 1px solid green; 
 
    position: relative; 
 
    left: 50px; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#canvas1 { 
 
    border: 1px solid blue; 
 
    position: absolute; 
 
    left: 50px; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
}

<div class="template" id="T2"> 
 
    <div class="chapter" id="C2"> 
 
    <h1>Why can't I overlap the below elements?</h1> 
 
    <div class="container"> 
 
     <img src="" id="img1" /> 
 
     <canvas id="canvas1"></canvas> 
 
    </div>  
 
    </div> 
 
</div>

出典

2017-09-05 20:13:52 Thijs

こんにちは、これは大変参考になりました - 私は最後にCSSに固執したときにボックスサイズが存在するとは思わない。 – DVCITIS

'box-sizing'は私のお気に入りのCSSプロパティの1つで、フロントエンド開発者の生活をとても簡単にします！ – Thijs

どのようなデフォルトのCSSが、2つの要素を相対的な位置合わせで完全にオーバーラップさせないのですか？

答えて

関連する問題