叠加 'div' 未与正确的项目对齐

Question

使用 Django，我将名为列表的字典传递到 HTML 模板中。字典有一个键（列表），它对应于一个规格，这是另一个具有特定字段的字典，如 'price' 或 'title'.

然后在模板中，我使用 for 循环来显示所有列表及其图像。我还创建了一个 'status' 叠加层 div（div 与 class status），它显示有关上述列表的更多具体信息，并出现在悬停时--我目前正在使用 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 中，但这完全弄乱了我的样式和叠加层 divs 仍然无法正确对齐。

Answer 1

我的猜测是因为 .status 中的 position: absolute;。尝试将其更改为 position: relative;

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

编辑：您需要做的是为每个叠加层和项目一起添加一个容器。将该位置设置为 position: relative;，然后您的 position: absolute; 叠加层和项目将堆叠在彼此之上。请看我在下面做了什么。我在每个项目上添加了 div class .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>

叠加 'div' 未与正确的项目对齐

Overlay 'div' does not align to the correct item

html

css

overlay

alignment