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

1답변

  • 좋아요

    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

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

작성한 답변에 다른 개발자들이 댓글을 작성하거나 댓글에 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.