Question

我的div置于彼此之上/之上，我遇到了问题。

td {
    width: 14.28%;
    height: 16.6%;
    position: relative;
    }

.details {
    position: absolute; 
    display: none;
    background-color: gray;
    overflow: visible;
    border: 2px solid black;
    } 

div:hover > .details {display: block;}

<table>
<tr>
<td *ngFor="let cell of ukeEn()">
                {{cell.text}}
                <div class="outer" *ngIf="datoerContains(cell) != null">
                  <div class="circle" *ngFor="let circle of datoerContains(cell)"></div>
                  <div class="details" *ngFor="let circle of datoerContains(cell)"> 
                    {{circle.skole}} <br>
                    {{circle.kommentar}} <br>
                    SFO: {{circle.sfodag}}
                  </div>

                </div>
            </td>
</tr>
</table>

问题在于details类。使用*ngFor，会在此处创建多个div - 但您只能看到其中一个出现，而其他人正在“隐藏”。

有什么想法吗？我打算测试两种方式;彼此相邻，彼此相邻。我希望避免删除absolute上的.details，因为它用于其他目的。

Answer 1

通过自己玩耍来管理寻找解决方案。我从position和td移除了.details，并为position: absolute添加了.outer。然后他们完全放在彼此之下。为了让它们彼此相邻，我刚刚将float: left添加到details。

td {
    width: 14.28%;
    height: 16.6%;
    }

.outer {
    position: absolute
}

.details {
    display: none;
    background-color: gray;
    overflow: visible;
    border: 2px solid black;
    float: left;
    }

Answer 2

只需删除CSS .details中的display: none;即可为我工作得很好......

div出现在彼此身后

2 个答案: