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, но вы можете видеть только один из них, появляющийся, так как другие «скрываются» позади.

Любые идеи? Я собирался проверить два пути; рядом друг с другом и под друг друга. Я бы хотел (а) избежать удаления 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

Просто удалите display: none; в CSS .details работал нормально для меня ...