CSS만 사용하여 이미지의 오른쪽 하단에 확인란을 어떻게 추가할 수 있나요?

선택할 이미지에 확인란 표시

웹 개발 영역에서 선택 항목에 확인란을 표시하려는 시나리오가 발생할 수 있습니다. 선택 기능을 활성화하려면 이미지의 오른쪽 하단 모서리를 사용하세요. 이 기사에서는 이 일반적인 쿼리에 대한 자세한 솔루션을 제공합니다.

CSS 기반 접근 방식

CSS의 다양성을 활용하면 추가 코드에 의존하지 않고도 이러한 효과를 얻을 수 있습니다. . 이미지에 고정된 크기가 있는 한 다음 접근 방식을 활용할 수 있습니다.

• 체크박스를 이미지 컨테이너 내에 절대적으로 배치합니다.
• 체크박스의 아래쪽 및 오른쪽 속성을 다음으로 설정합니다. 원하는 위치에 정렬하려면 0을 사용하세요.

HTML 마크업

각 이미지에 대한 컨테이너 요소를 생성하고 그 안에 확인란을 포함합니다.

<div class="container">
    <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="CSS만 사용하여 이미지의 오른쪽 하단에 확인란을 어떻게 추가할 수 있나요?" >
    <input type="checkbox" class="checkbox"><p><strong>CSS 스타일</strong></p>
<p>스타일 정의 체크박스 위치를 올바르게 지정하세요.</p>
<pre class="brush:php;toolbar:false">.container {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin-left: 10px;
}
.checkbox {
  position: absolute;
  bottom: 0px;
  right: 0px;
}

이벤트 클릭 처리

체크박스 클릭에 응답하려면 각 체크박스 요소에 클릭 리스너를 연결하기만 하면 됩니다.

var checkboxes = document.getElementsByClassName('checkbox');
for (var i = 0; i <p><strong>예</strong></p><p>라이브 이 기술을 보여주는 예는 여기에서 찾을 수 있습니다: [실시간 테스트 사례](https://jsfiddle.net/Your-Fiddle-URL/).</p><p>이 접근 방식은 선택 목적으로 이미지 위에 확인란을 표시하는 간단하고 효과적인 방법을 제공하므로 사용자 친화적인 인터페이스를 만들 수 있습니다. 쉽게.</p>