javascript - HTML在整个div上绘制垂直线

我试图在鼠标后沿整个div绘制一条垂直线。问题在于其他要素已经超出界限。我希望该行遍历所有内容。

这是小提琴：https://jsfiddle.net/9hzcm23q/

这里的代码：

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);
});

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

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

最佳答案

您需要将top: 0添加到straightLine类，如下所示：

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

Here is a working fiddle