后div块滚动到最前面的div

如何解决后div块滚动到最前面的div

我想在页面上获得非滚动背景div。

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="back"/>
    <div class="front">
      <p>
      Lorem ipsum dolor sit amet,consectetur adipiscing elit. Phasellus turpis tortor,semper id suscipit vel,bibendum eu magna. Nullam a libero nisi. Fusce eget elementum augue. Ut tellus leo,dignissim varius finibus a,aliquet ut turpis. Proin non elit luctus,maximus nunc ac,auctor elit. Nullam erat ante,faucibus ac viverra eget,finibus nec ipsum. Vivamus sit amet purus accumsan justo finibus rutrum eu nec nunc.</p>
      <p>Suspendisse eros lorem,luctus vitae volutpat ultricies,egestas et risus. Morbi fermentum iaculis nunc,ac tincidunt elit tristique sed. Aenean efficitur velit elit,vitae efficitur ex lobortis non. Etiam in orci ut libero lobortis laoreet. Suspendisse efficitur et sem non bibendum. Nam iaculis,mi in pharetra auctor,diam tellus commodo eros,eget volutpat ipsum enim vitae justo. Sed non ullamcorper odio,ac euismod ligula. Proin euismod eleifend convallis. Vivamus maximus accumsan dignissim. Morbi interdum magna sit amet tempor lacinia. Vivamus nec mi ligula. Donec tortor ex,commodo a est sit amet,volutpat gravida risus. Mauris vitae malesuada est. Curabitur blandit posuere ligula sit amet feugiat. Sed est tellus,cursus eget laoreet et,imperdiet eget dui. Donec facilisis,leo at mollis maximus,sapien purus lacinia mauris,ut fringilla turpis nibh finibus nunc.</p>
      <p>Maecenas eget lorem posuere,tincidunt massa sit amet,vehicula diam. Nunc vel consequat nulla. Etiam volutpat volutpat fringilla. Suspendisse potenti. In mattis ex non ex iaculis,eu gravida nulla ultrices. Curabitur ut sem purus. Donec quis tempor lorem,faucibus condimentum eros. Donec massa dui,euismod non tincidunt sed,tempor id nisl. Pellentesque varius mollis nibh.</p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

我的style.css如下：

.back {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: lightblue;
  }
  .front {
    position: relative;
  }

我期望-我的长文本滚动到浅蓝色背景（第一格）。

我见过的-滚动锁定，我只看到长文本在屏幕上的一部分。因此，当我期望相反时，div.back似乎位于z-index堆栈的顶部。

为什么会这样？

解决方法

感谢@Alohci：

n*n无效。

正确为<div class="back"/>