gpt4 book ai didi

css - 绝对位置和 Canvas

转载 作者:太空宇宙 更新时间:2023-11-04 10:25:36 25 4
gpt4 key购买 nike

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

我预计“after”字符串位于深红色区域的顶部,而不是底部。为什么:外部跨度定义了 position:relative,因此这是具有 position:absolute 的子元素的 anchor 。

position:absolute 和 top=0px,left=0px 的内部跨度;应位于外部跨度的左上角。

外跨度没有包围 Canvas ,这是我不明白的另一点。

谁能告诉我为什么外部跨度没有包围 Canvas 。我认为这就是为什么内部跨度没有位于红色矩形的左上边界的原因。

最佳答案

发生这种情况是因为 Canvas 位于 span 内,它是 display:inline 所以它(span ) 不会根据 Canvas 的大小调整大小。 (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>

关于css - 绝对位置和 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36815218/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com