hyowonii의 블로그

[CSS] img 위에 button 추가 본문

웹/CSS

[CSS] img 위에 button 추가

hyowonii 2022. 2. 21. 20:34 
<li className="favcat">
  <img src={img} style={{ width: "150px" }} />
  <button className="btn" onClick={() => deleteFavorite(img)}>X</button>
</li >
.favcat {
  position: relative;
}

.btn {
  position: absolute;
  right: 0px;
}

상위 li 태그에 position: relative;

버튼에 position: absolute;

 

결과 화면

이미지 위에 버튼 추가된 것 확인

 

'웹 > CSS' 카테고리의 다른 글

[CSS] mouse hover로 이미지 확대 시 가림 문제&해결  (0) 2022.02.28
[CSS] :hover 이미지 확대  (0) 2022.02.21
[CSS] em / rem  (0) 2022.02.08
'웹/CSS' Related Articles more