title: how to draw a vertical line in html using position:relative
body: <p>Just out of curiosity, is it possible to draw a vertical line in html? <a href="https://i.stack.imgur.com/plOqm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/plOqm.png" alt="The below image is a general look of what i&#39;m trying to do. "></a></p>
  
  <p>I've succeeded on doing the horizontal line using the <code>&lt;hr&gt;</code> tag by setting the position to <code>position:relative</code> and  <code>z-index: -9999</code> to make it go behind the colored boxes. </p>
  
  <p>(The colored boxes here represent different images. Sorry for the terrible drawing) but when I try to apply </p>
  
  <p><code>&lt;hr style="position: relative; width:0px; height:50px; top: 100px;"&gt;</code></p>
  
  <p>the other horizontal lines that I've created earlier aren't placed the same as before. But I am using the similar style for both horizontal and vertical lines. Any idea on how or why this happens? Or is it just impossible to do? </p>
  
  <p>Thanks in advance!</p>