체크박스를 이미지 오른쪽하단에 이동시키고싶은데 이동시키면 이미지 뒤에 가려져서

안보이는것같은데 이미지위에 나타나게 하는방법은 어떻게하나요?

그리고 체크박스를 모든이미지에 넣고싶은데 row클래스 밑에 코드를 쓰면 하나만 생겨서 어떻게 모든이미지에

체크박스를 넣는지 궁금합니다

<div class="row">


  <div class="column">
    <input type="checkbox" class="chb" onclick="func();"/>  <Red 0=""></Red>
    <img src="https://cdn.pixabay.com/photo/2018/09/23/18/40/three-zinnen-3698094__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2020/08/01/10/04/alpine-5455013__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2020/07/25/14/23/cliff-5436923__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2014/11/21/03/26/scotland-540119__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2015/08/30/05/41/neist-point-913838__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2016/12/13/15/16/wales-1904310__340.jpg">
  </div>
  <div class="column">
    <input type="checkbox" class="chb" onclick="func();"/>  <Red 0=""></Red>
    <img src="https://cdn.pixabay.com/photo/2016/12/09/18/38/rock-1895789__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2010/12/13/10/33/ireland-2901__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2015/09/18/03/36/film-camera-945006__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2017/08/10/08/39/three-2620056__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2017/01/02/01/59/rock-1945923__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2015/11/15/14/30/veligandu-island-1044366__340.jpg">
  </div>
  <div class="column">
    <img src="https://cdn.pixabay.com/photo/2017/12/10/17/40/prague-3010407__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2017/06/22/11/54/town-2430571__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2013/04/11/19/46/louvre-102840__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2018/04/25/09/26/eiffel-tower-3349075__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2020/07/23/07/10/market-5430564__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2016/01/22/16/42/eiffel-tower-1156146__340.jpg">


  </div>
  <div class="column">
    <img src="https://cdn.pixabay.com/photo/2016/01/13/01/36/bagan-1137015__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2017/01/16/15/17/hot-air-balloons-1984308__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072__340.jpg">
    <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
    <img src="https://cdn.pixabay.com/photo/2018/07/14/15/27/cafe-3537801__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2014/08/12/00/01/oia-416136__340.jpg">
  </div>
</div>

<script>
function func()
      {
        var chb = document.getElementsByClassName('chb');
        if(chb[0].checked)
        {
           document.getElementById('pgh').style.color = '#37DCE1';
        }
      }

</script>

<style>
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}


/* Create four equal columns that sits next to each other */
.column {
  flex: 23%;
  max-width: 25%;
  padding: 0 4px;
}


.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

</style>