bottom div of box is placed to bottom of previous box

Question

I want to create scrollable "list" of divs under each other. I want each div to have 4 rectangles(divs) on eaach side. First div is okay, but top and bottom rectangles of all other divs are placed onto the bottom and top of first div.

here is my HTML and CSS code:

.collection {
  height: 100vh;
  width: 100vw;
}

.leftArrow {
  background: blue;
  position: absolute;
  left: 0px;
  height: 100vh;
  width: 5vw;
}

.rigthArrow {
  background: blueviolet;
  position: absolute;
  height: 100vh;
  right: 0px;
  width: 5vw;
}

.topArrow {
  background: grey;
  position: absolute;
  top: 0px;
  left: 5vw;
  height: 5vh;
  width: 90vw;
}

.bottomArrow {
  background: firebrick;
  position: absolute;
  bottom: 0px;
  left: 5vw;
  height: 5vh;
  width: 90vw;
}

body {
  margin: 0px;
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
}

<div id="gallery">
  <div class="collection" style="background-color: greenyellow;">
    <div class="leftArrow"></div>
    <div class="rigthArrow"></div>
    <div class="bottomArrow"></div>
    <div class="topArrow"></div>
  </div>
  <div class="collection" style="background-color: antiquewhite;">
    <div class="leftArrow"></div>
    <div class="rigthArrow"></div>
    <div class="bottomArrow"></div>
    <div class="topArrow"></div>
  </div>
  <div class="collection" style="background-color: black;">
    <div class="leftArrow"></div>
    <div class="rigthArrow"></div>
    <div class="bottomArrow"></div>
    <div class="topArrow"></div>
  </div>
</div>

Here is also picture for better understanding. One div is on whole viewport.

I tried to do it but it doesnt work idk what to write here :D

Answer 1

If you want the coordinates of inner divs to be applied to its parent element, you need to relatively position the parent element by updating .collection class with position set to relative:

.collection {
  height: 100vh;
  width: 100vw;
  position: relative;
}