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

Question

我正在尝试在鼠标后的整个 div 上绘制一条垂直线。问题是其他元素越线了。我希望这条线遍历所有内容。

这是 fiddle :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>

Answer 1

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

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

Here is a working fiddle