하나의 div 위에 다른 div를 overlay하는 방법, 혹은 하나의 <img>위에 다른 div를 overlay하는 방법
조회수 13523회
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
1 답변
-
두 div를 모두 감싸 주는 wrapper div를 만들고 CSS 포지션을 줍니다. A가
position: relative
인데 그 안에position: absolute
인 B가 있을 경우, B개체는 A개체를 기준으로top
,left
속성값을 계산합니다..item-wrapper { position: relative; /* 생략 */ } .item-info-box { position: absolute; left: 0; bottom: 0.75em; /* 이하 생략 */ }
데모를 참고하세요.
+ "이건 CSS를 어떻게 구현했을까?" 하는 곳이 있다면 일단 우클릭하여 "검사"를 클릭해 보세요. 브라우저 개발자 도구가 뜨면서 힌트를 얻을수 있을것입니다.
- z-index를 이용하여 할 수 있을까요? 알 수 없는 사용자 2019.1.11 16:04
- 비추합니다. 할 수는 있는데 z-index는 매우 자의적인 속성이기 때문입니다. position absolute가 걸린 요소들은 전체 마크업상 나중에 나오는 것이 더 위로 올라오게 되어 있으므로 그걸 이용해 보세요. 그리고 어차피 z-index를 쓰더라도, 이미지 아래 어디쯤에 뭐가 나와야 한다 하는 부분을 조정하려면 left/right/top/bottom 좌표속성이 필요해집니다. 엽토군 2019.1.11 18:18
- 새로 질문을 올렸습니다 원하는 모습과 최대한 유사하게 만들었는데 이게 화면 조정에 따라 상품 설명이 중심에서 좌 우로 이동합니다. 고정시키려면 어떡해야 할지 알려주세요... (가능하시다면 제가 새로 올린 질문을 확인해 주세요...) 알 수 없는 사용자 2019.1.14 09:33
- 감사합니다!!! 알 수 없는 사용자 2019.1.14 09:33
댓글 입력