覆盖“div”未与正确的项目对齐

Question

使用 Django，我将一个名为 Listings 的字典传递到一个 HTML 模板中。该字典有一个键（列表），它对应于一个规范，这是另一个具有特定字段（如“价格”或“标题”）的字典。

然后在模板中，我使用for 循环来显示所有列表及其图像。我还创建了一个“状态”覆盖 div（类为 status 的 div），它显示有关所述列表的更多具体信息，并出现在悬停上——我目前正在使用 onmouseover 和 onmouseout 属性.

问题是，当我在页面上有两个或多个项目时，所有覆盖 div 都会出现在页面中的第一个项目上，所以当我将鼠标悬停在第一个项目上时，我会得到最后一个项目的覆盖（因为它们被堆叠在一起）。 如何让覆盖 div 出现在相应的列表上？

这是我的代码： HTML 模板

        <div class="items-container">
        {% for listing, specs in listings.items %}
            <div class="status" id="{{ listing }}" onmouseover="showstatus(this)" onmouseout="out(this)">
                <div class="status-content">
                    <h2 class="update-title">_{{specs.title}}_</h2>
                    <h5 class="status-text">STATUS: {{specs.status}}</h3>
                </div>
            </div>
            <div class="list-item">
                <img src="{{specs.pic}}" class="item-thumbnail">
            </div>
        {% endfor %}
        </div>

CSS

.items-container {
    margin-left: 45px;
    margin-right: 45px;
    display: flex;
    flex-wrap: wrap;
}

.list-item, .status {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 25%;
}

.status {
    position: absolute;
    background: rgba(255, 255, 255, 0.75);
    opacity: 0;
    width: 23.6%;
}


.item-thumbnail {
    width: 100%;
    background: #f0f2ed;
    border: 18px solid #f0f2ed;
    margin-bottom: 5px;
}

.status-content {
    position: absolute;
    display: block;
    left: 50%;
    transform: translate(-50%, 0) translateY(33%);
    margin-top: 3vh;
    padding: 6px;
    width: 99%;
    bottom: 48%;
}

Javascript 函数（不是必需的，但以防万一）

function showstatus(object) {
    object.style.opacity = "1";
}

function out(object) {
    object.style.opacity="";
}

注意：我尝试将 list-item 和 status div 放在另一个 div 中，但这完全打乱了我的样式，并且覆盖 div 仍然无法正确对齐。

Answer 1

我的猜测是因为.status 中的position: absolute;。试试改成position: relative;

这也可能是因为.status-content 中的position: absolute;。如果第一行不起作用，请尝试简单地删除该行代码。

编辑：您需要做的是为每个叠加层和项目添加一个容器。将该位置设置为position: relative;，然后您的position: absolute; 用于覆盖，项目将堆叠在彼此之上。请看我在下面做了什么。我在每个项目上添加了一个 div 类 .inditem。

function showstatus(object) {
    object.style.opacity = "1";
}

function out(object) {
    object.style.opacity="";
}

.inditem{
  position: relative;
}

.items-container {
    margin-left: 45px;
    margin-right: 45px;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
}

.list-item, .status {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 25%;
}

.status {
 position: absolute;
    background: rgba(255, 255, 255, 0.75);
    opacity: 0;
    width: 23.6%;
}


.item-thumbnail {
    width: 100%;
    background: #f0f2ed;
    border: 18px solid #f0f2ed;
    margin-bottom: 5px;
}

       <div class="items-container">
        <div class="inditem"> 
            <div class="status" id="OOO001" onmouseover="showstatus(this)" onmouseout="out(this)">
                <div class="status-content">
                    <h2 class="update-title">_The_Tiger_Shirt_</h2>
                    
                        
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%; padding: 6px;">
                                    <h6 style="font-weight: thin; font-size: 13px; align-self: flex-end;">[Complete!]</h6>
                                </div>
                            </div>
                            <h3 class="status-text">STATUS: Available</h3>
                </div>
            </div>
            <div class="list-item">
                <h1 class="hidden">OOO001</h1>
                <img src="https://imgur.com/c3cv6SW.png" class="item-thumbnail">
            </div>
        </div>
        <div class="inditem"> 
            <div class="status" id="FW20-H01" onmouseover="showstatus(this)" onmouseout="out(this)">
                <div class="status-content">
                    <h2 class="update-title">_Basic_Hoodie_</h2>
                    
                        
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 50%; padding: 6px;">
                                    <h6 style="font-weight: thin; font-size: 13px; align-self: flex-end;">[Processing...]</h6>
                                </div>
                            </div>
                            <h3 class="status-text">STATUS: Ordering...</h3>
                        
                    
                </div>
            </div>
            <div class="list-item">
                <h1 class="hidden">FW20-H01</h1>
                <img src="https://imgur.com/nIZxLpA.png" class="item-thumbnail">
            </div>
        
    </div>
    </div>