Question

我正在写一个玩具屋应用程序。有背景区，玩偶和配件。

背景区域应包含玩偶（玩偶位置相对于背景区域。）

娃娃应该包含配件（配件位置将相对于娃娃的边界。）

我没有问题让背景区域包含玩偶 - 只需将背景区域设置为“position：relative”，确保玩偶是一个后代并将其设置为“position：absolute”并完成。

但是配件在娃娃方面的表现不一样。我无法将玩偶和背景设置为相对位置。

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在您的玩偶div中，您是否可以使用position：inherit来赋予它与玩偶相同的位置类型？

重叠图像上的图像...在图像上（或在容器中）

1 个答案: