Understanding why the pure CSS parallax effect works with a div but not a body tag?

Question

I am trying to understand the effect of Pure CSS Parallax, which Kate Clark demonstrates on her website in this article .

Take these two jsFiddles: CSS Parallax with div and CSS Parallax with body .

The first works as described, the second does not, and the parallax effect does not occur. The only difference between the two documents is that the first does not have an intermediate tag div.parallaxwith the following properties:

.parallax {
      perspective: 1px;
      height: 800px;
      overflow-x: hidden;
      overflow-y: auto;
      background-color:rgba(0,0,0,0.25);
 }

So far, the second removes this tag and adds the above styles to the body:

body {
      perspective: 1px;
      height: 800px;
      overflow-x: hidden;
      overflow-y: auto;
      background-color:rgba(0,0,0,0.25);
 }

- , ? ? body div.parallax?

Answer 1

, overflow , overflow: visible . . .

overflow: hidden .