How to put a block at the bottom of the page without pinning it?

Question

css

Actually how?
I'm trying to pin a box with position set to fixed, but when the window size changes (smaller than the size of the top and bottom boxes to be pinned), that box (bottom) runs over the top box.

Answer 1

You have a dotted path (svg path). On example 1 of the lines from the site https://slides.com
This is the final state of the points. Here is the initial one:
Now, on the page load event, animate the d attribute from the start state to the end state.
Can be done via requestAnimationFrame() if knowledge permits. At each step add N to the coordinate of the point.

let i = 0;
(function loop() {
  i++;
  path.setAttribute('d', `M0,400 L 1000,400 1000,445 S ${i},420 0,480 Z`);
  if (i === 500) return
  window.requestAnimationFrame(loop);
})();

Something like this. There are a lot of examples on the Internet: https://medium.com/@bdc/gain-motion-superpowers-wi...
Or use libraries that allow you to do this in an easier way:
update:
https://youtu.be/qtZ_ISUOzhI at one time liked the explanation from this guy. In the video, he does a different transformation, but the idea is exactly the same. Just change to suit your needs.

Answer 2

How to put a block at the bottom of the page?

Like this.
nine