与画布的绝对位置

我有一个问题，为什么跨度位于根跨度的底部。我创建了一个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>

我预计在暗红色区域的顶部，而不是在底部字符串“后”。原因：外部跨度定义位置：相对，因此这是位置为绝对的孩子的锚点。

位置：绝对和顶部= 0px，左= 0px;应该位于外部跨度的左上角。

外部跨度不包围画布，这是我不明白的另一点。

谁能告诉我为什么外部跨度不包围画布。我认为这就是为什么内部跨度不在红色矩形的opper左边界的原因。

来源

2016-04-23 user2706510

代码放在你的问题，请 – j08691

这是一种奇怪的方式使用内联元素（跨度）。我想你可以只画布{position：absolute;}'。 – markE

这是因为画布是span是display:inline所以它（的span）不是由画布的大小进行调整的内部。（的canvas溢出的span *）

为了展示这个问题看

/* 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>

外跨度设置为display:inline-block将解决这个问题。

见

/* 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