Question

我有一个问题，为什么跨度位于根跨度的底部。我创造了一个plunker：

＆＃13;

/* Styles go here */

span {
  background-color :#808080;
}

canvas {
  background-color:#800000;
}

＆＃13;

<!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>

＆＃13;

我期待＆＃34;＆＃34;＆＃34;＆＃34;字符串位于深红色区域的顶部，而不是底部。为什么：外跨度定义position：relative，因此这是具有position：absolute。

的子节点的锚点

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

外跨度并不包围画布，这是我不理解的另一点。

任何人都可以告诉我为什么外跨没有包围画布。我认为这就是为什么内跨距没有位于红色矩形的左边框的原因。

Answer 1

这是因为画布位于span display:inline内，所以它（ span ）不会按画布大小调整大小。（ canvas溢出 span *）

要展示问题，请参阅

＆＃13;

/* Styles go here */

span {
  background-color :#808080;
  border:1px solid black;
}

canvas {
  background-color:rgba(100,0,0,0.5);
}

＆＃13;

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

＆＃13;

将外部范围设置为display:inline-block将解决问题。

见

＆＃13;

/* Styles go here */

span {
  background-color :#808080;
  border:1px solid black;
}

canvas {
  background-color:rgba(100,0,0,0.5);
  display:block;
}

＆＃13;

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

＆＃13;

Answer 2

这是因为你将块元素（画布）放在内联元素（span）中。因此，Span元素不会延伸到它的块内容。为防止这种情况，请将display: inline-block添加到span元素中。

聚苯乙烯。虽然它现在可以正常工作 - 在内联中嵌套块级元素并不是有效的，所以我建议用div替换span。

另一个建议 - 当您将值设置为0时，不要添加单位，在您的情况下使用left: 0; top: 0;代替left: 0px; top: 0px;

修复示例：https://plnkr.co/edit/MAfzT9A3uJwHAN8YtpKF?p=preview

绝对位置和帆布

2 个答案: