如何使用position:relative在html中绘制垂直线

出于好奇，可以在html中画一条垂直线吗

通过将位置设置为position:relative和z-index:-9999以使其位于彩色框后面，我已经成功地使用标记完成了水平线

这里的彩色框代表不同的图像。很抱歉画得很糟糕，但当我尝试申请时

我前面创建的其他水平线的位置与以前不同。但我对水平线和垂直线都使用了类似的样式。你知道这是怎么发生的吗？还是根本不可能做到

---

提前谢谢

ya画布是可能的

<div id="myCanvas" width="200" height="100">

</div>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(200,0);
ctx.lineTo(200,400);
ctx.stroke();
</script>

---

是的，帆布是可能的

<div id="myCanvas" width="200" height="100">

</div>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(200,0);
ctx.lineTo(200,400);
ctx.stroke();
</script>

---

根据您的需要，您可能会发现css3转换：旋转是一个很好的选项：

.vertical {
    transform: rotate(90deg);
}

查看下面的一些示例：

---

根据您的需要，您可能会发现css3转换：旋转是一个不错的选择：

.vertical {
    transform: rotate(90deg);
}

查看下面的一些示例：

这会奏效的

这将起作用

您也可以尝试一下

<hr width="1" size="500">

你也可以试试这个

<hr width="1" size="500">

---

您可以通过以下链接进行检查

---

您可以通过以下链接进行检查

---

---

可能是@Andrei Maieras的复制品我尝试过这些方法，但它们主要是关于自己画垂直线，而不是在图像后面画垂直线。你认为有可能吗？谢谢为什么不呢？在我的第一条评论中使用链接中的垂直线，或者Javi Prieto的评论，并添加一些样式，将其放在任何你想要的地方，就像你对@Andrei Maieras的可能副本所做的那样。我尝试了这些方法，但它们主要是关于自己绘制垂直线，而不是在图像后面绘制垂直线。你认为有可能吗？谢谢为什么不呢？在我的第一条评论或Javi Prieto的评论中使用垂直线from链接，并添加一些样式，将其放在任何你想要的地方，就像你对canvas所做的那样？这是我第一次听到帆布。你能详细说明一下吗？或者提供一些有用的链接？谢谢@Ujjwal Kumar Gupta：这是html5中引入的一个新功能，借助于画布，你可以在javascript的帮助下画出你想要的任何形状，如线、重角、圆、曲线。这就像用编程画布制作图形一样？这是我第一次听到帆布。你能详细说明一下吗？或者提供一些有用的链接？感谢@Ujjwal Kumar Gupta：这是html5中引入的一个新功能，借助画布，你可以在javascript的帮助下绘制任何形状，如线、角、圆、曲线。这就像用编程制作数字一样感谢你的建议@Javi Prieto。我尝试过这种方法，但垂直线总是在中间，似乎无法重新定位。谢谢你的建议。我已经尝试过这种方法，但垂直线总是在中间，似乎无法重新定位。谢谢JsFoDeld.Srinivas Pai只是一个简短的问题，为什么当我添加一些造型时，垂直线总是在中间？我的css，.verti{位置：固定；顶部：20px；左侧：-90px；}根据您的需要可以设计样式。假设你想让它在左边使用这个位置：相对；浮动：左；对于正确使用浮动：右；位置：固定和位置：静态不支持左、右、上、下。您可以使用位置：相对位置或绝对位置，也可以使用固定位置或静态位置添加一些margin@Srinivas我现在完全明白了！非常感谢，非常感谢你的邀请@Srinivas Pai只是一个简短的问题，为什么当我添加一些造型时，垂直线总是在中间？我的css，.verti{位置：固定；顶部：20px；左侧：-90px；}根据您的需要可以设计样式。假设你想让它在左边使用这个位置：相对；浮动：左；对于正确使用浮动：右；位置：固定和位置：静态不支持左、右、上、下。您可以使用位置：相对位置或绝对位置，也可以使用固定位置或静态位置添加一些margin@Srinivas我现在完全明白了！非常感谢*竖起大拇指感谢@Srikanth Pullela！我认为这对我来说是最好的解决办法。我一直想用tag，但没想到我这么傻。无论如何，谢谢谢谢@Srikanth Pullela！我认为这对我来说是最好的解决办法。我一直想用tag，但没想到我这么傻。无论如何，谢谢

<div id="blue_box">
<div id="top"></div><hr>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div><hr class="hr2"><hr class="hr3">
<div class="divider1"></div>
<div class="divider2"></div>