キャンバスと一緒の絶対位置

なぜスパンがルートスパンの底に位置するのか疑問があります。私はplunkerを作成しました：キャンバスと一緒の絶対位置

/* Styles go here */ 
 

 
span { 
 
    background-color :#808080; 
 
} 
 

 
canvas { 
 
    background-color:#800000; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <span style="position:relative"> 
 
     <canvas width="100" height="100"> 
 
     </canvas> 
 
     <span style="position:absolute; left:0px; top:0px;">after</span> 
 
    </span> 
 
    </body> 
 

 
</html>

私は暗赤色の領域の上部にある、ない一番下の「後」の文字列を期待しました。理由：外側のスパンはposition：relativeを定義します。これはposition：absoluteの子のアンカーです。

位置が絶対値で上部が0px、左= 0pxの内側スパン。外側スパンの左上隅に配置する必要があります。

外側スパンはキャンバスを囲んでいませんが、これは私が理解していない別のポイントです。

なぜ外側のスパンがキャンバスを囲んでいないのか誰にでも教えてください。私はこれが内側のスパンが赤い矩形の外側の左端に位置しない理由だと思う。

出典

2016-04-23 user2706510

コードは、あなたの質問に行くください – j08691

奇妙な方法ですインライン要素（スパン）を使用します。キャンバス{position：absolute;} 'にすることができます。 – markE

キャンバスはdisplay:inlineそれは（span）はキャンバスのサイズによってサイズ変更されないでspan内側にあるので、これが起こります。 display:inline-blockに外側のスパンを設定

/* Styles go here */ 
 

 
span { 
 
    background-color :#808080; 
 
    border:1px solid black; 
 
} 
 

 
canvas { 
 
    background-color:rgba(100,0,0,0.5); 
 
}

<span style="position:relative;"> 
 
     <canvas width="100" height="100"> 
 
     </canvas> 
 
     <span style="position:absolute; left:0px; top:0px;">after</span> 
 
    </span>

を参照してください問題を披露する

（canvasがspan *をオーバーフローして）問題を解決します。

を使用すると、インライン要素（スパン）内のブロック要素（キャンバス）を置くためです

/* Styles go here */ 
 

 
span { 
 
    background-color :#808080; 
 
    border:1px solid black; 
 
} 
 

 
canvas { 
 
    background-color:rgba(100,0,0,0.5); 
 
    display:block; 
 
}

<span style="position:relative;display:inline-block;"> 
 
     <canvas width="100" height="100"> 
 
     </canvas> 
 
     <span style="position:absolute; left:0px; top:0px;">after</span> 
 
    </span>

出典

2016-04-23 19:14:57

参照してください。結果としてスパン要素はブロックコンテンツに伸びません。これを防ぐには、span要素にdisplay: inline-blockを追加してください。

ps。インラインでブロックレベルの要素を入れ子にすることは有効ではないので、spanをdivに置き換えることをお勧めします。

別の提案 - あなたは0に値を設定すると、代わりにleft: 0px; top: 0px;

固定例のあなたのケースの使用left: 0; top: 0;で、ユニットを追加しないでください：https://plnkr.co/edit/MAfzT9A3uJwHAN8YtpKF?p=preview

出典

2016-04-23 19:15:44

キャンバスと一緒の絶対位置

答えて

関連する問題