I am trying to draw a vertical line across a whole div following the mouse. The problem is that other elements are over the line. I want the line go over all content.

Here is the fiddle: <https://jsfiddle.net/9hzcm23q/>

And here the code:

```js
var element = document.getElementById('box');

var drawLines = function(event) {
  var x = event.pageX;
  var straightLine = element.querySelector('.straightLine');

  var slTrans = 'translate(' + x + 'px, 0px)';
  if(!straightLine) {
     straightLine = document.createElement('div');
     straightLine.classList.add('straightLine');
     straightLine.style.height = "100%";
     straightLine.style.width = '2px';
     element.appendChild(straightLine);
  }
  straightLine.style.transform = slTrans;
}

element.addEventListener('mousemove', function(event) {
   drawLines(event);
});
```

```css
html, body{
  height: 100%;
  width: 100%;
  margin: 0px;
}

.box {
  height: 100%;
  width: 100%;
  background-color: white;
}

.straightLine {
  z-index: 10;
  position: fixed;
  background-color: red;
}
```

```html
<div class="box" id="box">
  <h1>
  Lorem
  </h1>
  <p>
  dolor amet
  </p>
</div>
```