CODEWITHSUNDEEP
htmlcss
MariusJ
MariusJ

Reputation: 305

div's appearing behind each other

I have problems with my div's placing behind/on top of each other. 

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>

The problem is with the details class. Using the *ngFor, several div's are created here - but you can only see one of them appearing as the other ones are "hiding" behind.

Any ideas? I was going to test two ways; beside each other, and below each other. I would like to avoid removing absolute on the .details as it's used for another purpose.

Upvotes: 0

Views: 1773

Answers (1)

MariusJ
MariusJ

Reputation: 305

Managed to find a solution by playing around myself. I removed position from both td and .details, and added position: absolute for .outer. Then they placed perfectly below each other. To get them place beside each other, I just added float: left to 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;
    }

Upvotes: 1

Related Questions