イメージ上のイメージの重複...イメージ（またはコンテナ内）

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

あなたのアクセサリーdivがあなたのdoll div内にある場合、あなたはpositionを使用できません：継承して、人形と同じポジションタイプを与えますか？