如何使用position：relative

Question

出于好奇，是否可以在html中绘制一条垂直线？

通过将位置设置为<hr>和position:relative以使其位于彩色框后面，我已成功使用z-index: -9999标记执行水平线。

（这里的彩色框表示不同的图像。对于可怕的绘图很抱歉）但是当我尝试应用

时

<hr style="position: relative; width:0px; height:50px; top: 100px;">

我之前创建的其他水平线并不像以前那样放置。但我对水平线和垂直线使用相似的样式。有关如何或为何发生这种情况的想法？或者这是不可能的？

提前致谢！

Answer 1

根据您的需要，您可能会发现css3 transform:rotate是个不错的选择：

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

检查下面的一些例子： http://codepen.io/anon/pen/vOvraM

Answer 2

<div class="test"></div>

示例Div我创建了设置高度你需要多少

.test{height:100px; width:0px; position:relative; border-left:1px solid gray;}

这将有效

Answer 3

你也可以尝试这个

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

Demo here

或

.vertical
{
   width: 1px;
   height: 100%; 
} 

Demo here

Answer 4

你可以使用画布;

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

Answer 5

您可以查看以下链接。

Fiddle

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