在圖像上（或在容器中）重疊圖像上的圖像

Question

我正在寫一個玩具屋應用程序。有一個背景區，一個玩偶和配件。

背景區應包含玩偶（玩偶位置是相對於背景區域。）

玩偶應包含附件（附件的位置將相對於所述玩偶的邊界。）

我沒有問題讓背景區域包含娃娃 - 只需將背景區域設置爲「位置：相對」，確保娃娃是後代並將其設置爲「位置：絕對」並完成。

但是配件不會以與玩偶相同的方式表現。我無法將娃娃和背景設置爲相對位置。

的位置W3Schools的條目：絕對狀態：

絕對元素的定位相對於它的第一定位 （不是靜態）的祖先元素

這是不正確的定義？絕對定位的元素的絕對定位子元素的行爲並不像描述的那樣。這個定義是否應該說「（只有相對）」而不是「（不是靜態的）」？

有沒有辦法做我想做的事 - 有一個任意的（但至少3）包含和他們的父元素界系列的元素？

這裏是代碼（還有更多的HTML，但我覺得這是整個相關部分中的 「隱藏」 類切換與JS）：

HTML：

<div id="container"> 
    <div id="display-area"> 
    <img id="curtains" src ={% static "house/images/curtains.jpg" %} alt="curtains"/> 
    {% for doll in doll_objects %} 
    <div><img class="hide" src="{{ MEDIA_URL }}{{ doll.doll_image }}" alt="{{ doll.doll_name }}" draggable="false" data-dollid="{{ doll.id }}"/> 
     {% for accessory in doll.accessory_set.all %}<div><img class="hide" src="{{ MEDIA_URL }}{{ accessory.accessory_image }}" alt="{{ accessory.accessory_name }}" draggable="false" data-accessoryid="{{ accessory.id }}" data-linkeddoll="{{accessory.doll_id}}" style="position:inherit"/></div> 
    {% endfor %} 
    </div> 
    {% endfor %} 
    </div> 
</div> 

CSS：

#display-area { 
    position:relative; 
    float:left; 
    width:78%; 
    height:96%; 
    margin:0; 
    padding:0; 
    z-index:0; 
} 

.doll { 
    position:absolute; 
    bottom:0%; 
    left:37%; 
    z-index:0; 
} 

.accessory { 
    position:absolute; 
    cursor:move; 
    cursor:grab; 
    z-index:1; 
} 

.hide { 
    visibility: hidden; 
} 

#container { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100vw; 
    height:100vh; 
    margin:0; 
    padding:0; 
    overflow: auto; /* clearfix */ 
} 

Answer 1

如果你的配件格是你的娃娃專區內，你能不能使用位置：繼承給它的相同位置類型的娃娃？