카페 24 위치 수정 (부모 자식 문제)

조회수 104회
<!-- IN SHOP-Best -->
<div class="In_Best">
    <div class="wrap_default" module="product_listmain_5">
        <div id="In_Shop">
            <div id="viewArea">
                <!--
                $count = 10
                -->
                <div id="imgList">
                    <div id="product_img">
                        <a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src='{$image_medium}' alt="{$subject}" class="thumb" id="SD_img"/></a>
                        <span id="wish_button" >{$list_wish_icon}</span>
                        <ul module="product_ListItem">
                            <li class="{$item_display|display}" style="font-family:'Roboto';"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                        </ul>
                        <p style="width:240px;">
                            <strong class="name"><a href="{$link_product_detail}" style="font-family:'Roboto'; font-weight:500 ;white-space:nowrap; word-wrap:normal;overflow:hidden;"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
                        </p>
                    </div>
                    <div id="product_img">
                        <a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src='{$image_medium}' alt="{$subject}" class="thumb" id="SD_img"/></a>
                        <span id="wish_button" >{$list_wish_icon}</span>
                        <ul module="product_ListItem">
                            <li class="{$item_display|display}" style="font-family:'Roboto';"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                        </ul>
                        <p style="width:240px;">
                            <strong class="name"><a href="{$link_product_detail}" style="font-family:'Roboto'; font-weight:500 ;white-space:nowrap; word-wrap:normal;overflow:hidden;"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="newinbutton">
        <a href="/index.html"><P>SHOP ALL </P></a>
    </div>
</div>
<!-- IN SHOP-Best 끝 -->
#In_Shop #viewArea #imgList #product_img #wish_button { position:absolute; z-index:100; cursor:pointer; bottom:0; display:block;margin-left:210px;} 
#In_Shop #viewArea #imgList #product_img {float:left; height:370px; padding-bottom:30px; margin: 0 15px; overflow:hidden;}
#In_Shop #viewArea #imgList #product_img #SD_img {width:240px; height:290px; overflow:hidden; object-fit: fill;}  
#In_Shop #viewArea #imgList #product_img p {text-overflow: ellipsis; overflow:hidden; text-align:left; margin-top:10px;}  
#In_Shop #viewArea #imgList #product_img ul {overflow:hidden; text-align:left; margin-top:20px;} 

html/css코드입니다.

이런 코드입니다. 문제는 span에 wish_button이라는 id를 넣었는데 이거의 부모가 product_img가 아니라 imgList가 되는거 같습니다 이유가 뭘까요? 사진에 하트가 제품 사진 위로 올라오길 바랍니다 ㅠㅠ 지금 저게 bottom 0을 준거에요.

이미지

1 답변

  • 좋아요

    1

    싫어요
    채택 취소하기

    1. id="product_img", id="wish_button", id="SD_img"는 모두 클래스로 바꿔 주세요.
    (한 DOM에서 같은 id가 2번 이상 나온다면 그건 틀린 것입니다. 이런 게 더 있으면 더 늦기 전에 다 클래스로 바꾸셔야 합니다.)

    2. .wish_button.product_img마지막 자식이 되도록 위치를 변경하세요.
    (이렇게 하면 z-index 처리를 할 필요가 없어집니다.)

    3. 다음과 같은 css를 적용해 보세요.

    #imgList .product_img {
        position: relative; /* 부모가 relative 한 위치를 가지므로 */
    }
    #imgList .product_img .wish_button {
        position: absolute; /* 그 자식의 absolute 위치는 부모를 기준으로 한 absolute 위치가 된다 */
        bottom: 1em;        /* 그래서 부모의 바닥으로부터 1em 떨어져 있을 수 있게 됨 */
    }
    
    • 정말 감사합니다! 덕분에 정확히 수정이 됩니다! 석윤지 2021.2.9 14:55

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

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

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

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.