하나의 div 위에 다른 div를 overlay하는 방법, 혹은 하나의 <img>위에 다른 div를 overlay하는 방법

조회수 13523회

이미지

<img>테그위에 하나의 div를 오버레이 하는 방법이나

이미지

<div> 위에 다른 div를 오버레이 하는 방법에 대해서 알려 주세요

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

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)