div出現在彼此後面

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 - 但您只能看到其中一個出現，因爲其他人隱藏在後面。

任何想法？我要測試兩種方法;彼此相鄰，並且在彼此之下。 我想避免在.details上刪除absolute，因爲它用於其他目的。

Answer 1

設法找到一個解決方案。 我從td和.details中刪除了position，並且爲.outer添加了position: absolute。然後他們完全置於彼此之下。 爲了讓它們彼此相鄰，我只是加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; ...