Почему img позиционируется относительно элемента у которого не задан position

let body = document.querySelector('body')
let sliderLines = document.querySelectorAll('.slider__line')
let sliderImgs = document.querySelectorAll('.slider img')
let sliderBtns = document.querySelectorAll('.slider__btn')

// --------------------------

// Ширина sliderLine
sliderLines.forEach(el => {
  el.style.width = `${el.children.length * 100}%`
})

// Ширина sliderImgs
sliderImgs.forEach(el => {
  el.style.width = `${getComputedStyle(el.parentNode.parentNode)
    .getPropertyValue('width')}`
})

// Алгоритм работы slider
sliderLines.forEach(el => {
  el.style.transform = 'translateX(0)'
})
body.addEventListener('click', (e) => {
  if (e.target.classList.contains('slider__btnNext')){
    let transform = parseInt((e.target.previousElementSibling.style.transform).replace(/[^\d.]/g, ''))
    let sliderWidth = parseInt(getComputedStyle(e.target.
    parentNode).getPropertyValue('width'))
    if(transform > (e.target.parentNode.firstElementChild.children.length-2)*sliderWidth){
      transform = -sliderWidth
    }

    e.target.previousElementSibling.style.transform = 
    `translateX(-${transform+sliderWidth}px)`
  } else if (e.target.classList.contains('slider__btnPrevious')){
    let transform = parseInt((e.target.previousElementSibling.previousElementSibling.style.transform).replace(/[^\d.]/g, ''))
    let sliderWidth = parseInt(getComputedStyle(e.target.
    parentNode).getPropertyValue('width'))

    if (transform == 0){
      transform = (e.target.parentNode.firstElementChild.children.length)*sliderWidth
    }

    e.target.previousElementSibling.previousElementSibling.style.transform = 
    `translateX(-${transform-sliderWidth}px)`
  }
})

// ---------------------------------

body.addEventListener('mousedown', (e) => {
  if(e.target.classList.contains('slider__img')){
    let timeout = setTimeout(() => {
      e.target.classList.add('imgBigger')
    }, 500);
  
    body.addEventListener('mouseup', (e) => {
      clearTimeout(timeout)
      
      e.target.classList.remove('imgBigger')
    })
  }
})
body.addEventListener('touchstart', (e) => {
  if(e.target.classList.contains('slider__img')){
    let timeout = setTimeout(() => {
      e.target.classList.add('imgBigger')
    }, 500);
  
    body.addEventListener('touchend', (e) => {
      clearTimeout(timeout)
      
      e.target.classList.remove('imgBigger')
    })
  }
})

.slidersWrapper{
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-end;
}


.slider__block{
  width: 45vw;
  height: fit-content;
  margin-bottom: 3vw;
}

.slider__title{
  font-size: 2em;
}

.slider{
  width: 100%;
  height: 70vh;
  margin: 1vw auto;
  position: relative;
  overflow: hidden;
}
.slider__line{
  height: 100%;
  display: flex;

  transition: all .3s ease-out;
}
.slider__img{
  height: 100%;
  object-fit: contain;

  background-color: rgb(200, 200, 200);
  transition: all .2s ease;
}
.imgBigger{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  
  object-fit: cover;
}

.slider__btn{
  width: 15%;
  height: 100%;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 3em;
  font-weight: 900;

  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  user-select: none;
}
.slider__btnNext{
  right: 0;
}
.slider__btnPrevious{
  left: 0;
}

<div class="slider__block slider__block2">
  <h2 class="slider__title">Волонтерство</h2>
  <div class="slider">
    <div class="slider__line">
      <img class="slider__img" src="01.jpg" alt="">
      <img class="slider__img" src="02.jpg" alt="">
      <img class="slider__img" src="01.jpg" alt="">
      <img class="slider__img" src="02.jpg" alt="">
    </div>
    <div class="slider__btnNext slider__btn">></div>
    <div class="slider__btnPrevious slider__btn"><</div>
  </div>
</div>